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nough words have been spent lamenting the state of 
FE the Web design industry since the dotcoms 
dotbombed. So we won't waste any more on that 
topic here. The fact is that creativity and innovation on the Web 
haven't come grinding to a halt. Certainly there are fewer 
opportunities for Web designers, but the competition since the 
shake-out in the industry is surely a good thing. 

Designers are sharper and more focused on quality than 
ever before. In fact, from a design point of view, you could say 
there has been something of a tidy-up going on. Bad design just 
isn’t going to cut it when clients’ budgets are tight and their 
demand for results is as vociferous as ever. Here in our latest 


Web Design Special, we take a look at some of the most 


frequent design mistakes, and tell you how to avoid them. Much 


of it is common sense, but the errors we hightlight are more 
common than you might think. 

The other thing we'd wish to highlight, apart from our usual 
set of tutorials, profiles and features, is the cover CD. We're 
striving to improve the quality of the CDs provided with 
Computer Arts Special and with this issue we bring you a full 
copy of DHTML Menu Builder 2.8, as well as an impressive 
collection of demos and utilities ~ all applications geared 
towards Web design. We're sure you'll find something useful. 

So, with a view to helping you create sites that are sharper, 
more refined and generally superior to those created by your 


competition, we suggest you tuck in... 
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Meet the British designers who 
are pushing the boundaries of 
Shockwave 3D 


The new media company taking on 
the world’s largest agencies... 


“Seeing things develop is the 


greatest kick | get,” says the 


designer behind Surfstation 
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A huge collection of software for 
Web designers to test 


And pay just £3 an issue 


Two copies of the Adobe Web 
Collection are up for grabs 


And Specials and save £37 


Stock up on any you've missed 


100% Photoshop 
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are you freelance? - finding it difficult to 
make new business contacts? panicnot... 


simply go to www. 


panicnot.com 


panicnot.com launched in May 2000 and has already had over 25,000 visits to the site 
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Full product forthe PC. See page 
26 for registration details 


Create 3D worlds with Adobe's 
ambitious new application 


Converts various digital video files 
to the Flash SWF format. Nice! 


CSS application. We bring you the 
demo and a free lite version 


it's time to get into Shockwave 3D 
and Directer is the tool forthe job 


Adobe's Web design application is 
a mean code cruncher 


Create Flash SWF animations, but 
use the After Effects toolset 


The market-leading Web design 
application. Beginners see page 18 


The vector animation tool you cant 
be without if you're a Web designer 


Once a pure vector illustration tool, 
it now handles Flash animation too 


Some effects are difficult to create 
in Flash — Swish solves that 


Pro and lite versions of this handy 
FTP utility are on our CD 


If Flash is going to break your 
budget, try out KooiMoves 


A text effects tool that creates 
Flash SWF files on the Mac 


Dreamweaver’ big brother is great 
for databases — see page 44 
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a rofessional Website design is 

f one of the most difficult creative 

i disciplines around, with projects 
often stretching the designer's 

talent and the user’s patience to their limits. 

There's a conflict right at the heart of the 
design process, and it makes a difficult job even 
harder when there seem to be incompatible 
goals. Creative temperament rails against being 
constrained by limited bandwidth, inconsistent 
browser rendering and the pétential absence of 
additional plug-in software. But users hate 

slow sites, over-large graphics, poor 
content and obscure navigation. 

Does it have to be this way? Do 
inspirational design and 
fundamental usability have to 

be mutually exclusive? Not 


101 Web design 
/ mistakes and how 
to avoid them 


Do inspirational design and fundamental usability 
have to be mutually exclusive? Not necessarily... 


necessarily. Often, the best results come from 
designing to the strengths of the medium, instead 
of fighting its limitations. In Web design, the first 
step is understanding the strengths and the 
limitations that exist, and realising that the 

Web really is fundamentally different from any 
other medium. 

This article describes 101 design mistakes that 
could be making your sites less useful, usable or 
attractive than they should be, ranging from 
cosmetic issues to serious usability problems. 
The aim is to help you achieve a balance between 
design and usability, creating sites that look great 
and are a pleasure for everyone to use. > 


aS lan Anderson is a freelance Web developer and trainer 
[w] http://zstudio.co.uk [e] ian@zstudio.co.uk. 
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Design 


1. Failing to test in both IE and NN 
Internet Explorer and Netscape Navigator have substantial 


Make sure you test your pages on both browsers to ensure that 
they work correctly 


2. Putting important stuff ‘below the fold’ 

4. Areally nice-looking site, but the The initially visible area of a page is vitally important. Users 
underlined text at lower right isn't actually will only scroll down if they can't see what they're looking for 
a link — the link is the >>" beside it. immediately, so ensure that things you want them to see are 
clearly visible above the bottom edge of the window at 
800x600. 


3. Not using Web-safe colours 

Using Web-safe colours is stillimportant: they help to stop 
colours appearing dithered on machines running in 256 
colours. It’s generally worth sticking to Web-safe colours 
wherever possible, because on average, 5 per cent of users still 
have only 8-bit colour. 


4. Using blue or underlined text that isn’t a link 
Don't make text blue or underlined when it isn'ta link: users will 
become irritated when they click it and nothing happens. 


5. Using transparent images on the wrong background colour 
Be especially careful not to use transparent images on 

the wrong background colour: it reveals a halo of wrongly 
coloured pixels. 


6. Setting the text of the status bar 

Some Web authoring programs enable you to make custom text 
appear in the browser status bar when the mouse hovers over a 
link. It’s best not to do this, though, because it prevents the user 
from seeing the destination URL. 


7. Using table background colour for borders 
When using background colour on a table with 1-pixel cell 


macromedia developer locator 


Plug yourself in. 
It's fast, easy, effective, and now it's free. 


@ Search developer profiles 


@ Create a free 
developer profile 


@ Edit profile 


a% 


@ Forgot password? 


14. Macromedia use text GIFs for design effect, but it's spoiled when the text is too small. Look at how broken the small type 
looks at lower left. In general, it’s best not to anti-alias 10pt text or smaller. 
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differences in how they handle HTML tags, JavaScript and CSS. 


spacing to contrast with a different colour for the cells to make 
borders, Netscape won't show table colour in the space 
between cells. Instead, put the main table inside another single 
cell table which has cell background colour applied. 


8. Putting a background image in the TR tag 

Don't use background images for table rows because this isn't 
supported in Internet Explorer. Watch out for Dreamweaver: in 
single cell tables, it applies the background to the <TR> tag 
even if you have the cell selected. 


9. Using table border colour 

If you're trying to create thin lines between table cells, you may 
have tried using 1-pixel borders with a table border colour. 
Unfortunately, the result is 2-pixel lines because the border is 
applied to each cell individually. Also, Netscape doesn't support 
table border colour, so you get the 3D embossing instead. 


10. Using table borders 

Don't use the table border attribute to create more interest on 
the page; those 3D embossed edges can look tacky. To highlight 
or separate the information ina table, try using alternate row 
colours, or cell colour with 1-pixel cell spacing instead. 


11. Using multiple columns 

Using multiple columns of body text on a Web page forces users 
with smaller displays to scroll horizontally and vertically to read 
the content. It’s better to use a single column of main text. 


12. Making pages that cause horizontal scroll bars 

Many sites are designed to a width of 740-760 pixels, but 
around 5 percent of users still use 640x480. If you can, make 
pages flexible so they work at any window size but still look 
best at 800x600 (50 per cent audience) and 1024x768 (32 per 
cent audience). 


13. Using images without width and height attributes 

How many times have you viewed a page that shifts and 
rearranges as it loads? It happens when there are images used 
without width and height attributes, and makes it really 
unpleasant to read the page. Always ensure that image tags are 
supplied with width and height attributes. 


14. Letting small text be anti-aliased in images or Flash 
Anti-aliasing can ruin the appearance of small text, and make it 
look broken or fuzzy. In general, it’s best not to anti-alias 10pt 
text or smaller. 


15. Not maintaining consistency 

It’s important to keep design elements and navigation 
consistent throughout the site, so that all the pages feel like a 
coherent whole and users don't have to adapt the way they 
navigate as they move from page to page. 


16. Not maintaining branding and navigation throughout the site 
This tends to be a problem on Intranets and Websites with many 
content owners all doing their own thing. It’s important to ensure 
that all pages use common branding and navigation elements. 
Use Dreamweaverlibrary items or GoLive components to 
control shared elements. 


17. Having splash pages or intro movies 
These rank among users’ top pet hates, and serve only to put a 
barrier between your users and the content. 


18. Making functional page elements look like adverts 
Users are learning to ignore any page elements that look like 
adverts. Banner ads are 468x60 pixels, so avoid these sizes. 


12. The IOC site is designed for 800x600, and looks terrible when viewed 
at 640x480. This is how 5 per cent of the audience see it. 


Don't make graphic panels the only way to link to important 
parts of your site. 


19. Making constantly running animations 

Humans evolved with a high sensitivity for movement, 
particularly at the edge of vision, so constantly running 
animations prevents people from concentrating properly on 
the content. 


20. Using animations for unimportant things 

Use animation to direct attention to something urgent or 
important, not something trivial, or irrelevant to the main 
message of the page. 


21. Using frames to crop the visible area to a fixed size 

This prevents users from seeing more content by making 
their browser window bigger, and forces them to read through 
a tiny ‘letterbox’. 


22. Using frames without compensating for the drawbacks 
Printing, bookmarking, users entering the site from search 
engines, and accessibility to non-frames browsers are just 
some of the problems with frames. Make sure you put solutions 
in place for these if you use frames on your site. 


23. Not designing in horizontal bands 

On long pages, using a single table for the page layout can 
increase the time taken to display anything at all. Use several 
tables one below another, and the page will display 
progressively as it loads. 


24, Not using cascading style sheets 

Still using the <FONT> tag? It makes pages much slower and 
more difficult to edit, and can help to make the page less 
accessible. Try using CSS instead. 


25. Embedding CSS style information in pages 

Don't embed style sheet information in the head of your pages. 
Instead, link to a shared style sheet so you can control your 
formatting from one file. 


26. Using 8pt text in CSS 
Dont use 8pt text in CSS: this appears so small on a Mac that 
it’s completely illegible. 


27. Failing to test on both Mac and Windows 

Pages look different on different platforms, and it’s tempting to 
test only on the one you use. You have to ensure that your pages 
look sensible and work well on Mac and Windows. 


28. Believing what your Web authoring software shows you 
HTML code does different things depending where it’s viewed. 


Web design software is usually designed to show an 
approximation of what IE and NN will display, so it’s almost 
never right. 


4 ene 
Accessibility 
30. Making text into images ; 
Text GIFs enable you to control the appearance of type, but they he 


exclude vision-impaired users and search engines, and make 
your site incredibly sluggish. 
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18. This company is announcing a new 
sub-site called E-News, and the only 
way inis through this banner. Most 
users never know it's there. 


31. Omitting ALT text from images 

It's important to include the ALT attribute in image tags and 
image maps, so that screen readers and other text-only 
browsers can still access the content. Make sure the ALT text is 
useful for users who can't see the image. 


32. Not putting any real text on the page 

If your page contains only images, you may prevent users 
from accessing your site reliably, because images often fail to 
download properly when the Net is busy. Your page will 
download faster and be available to everyone if you use real 
text instead. 


33. Using pixels as a unit of type size in CSS 

Pixels used as units in CSS prevent the user from resizing the 
text on the screen in IE. Being able to resize text is important in 
enabling users with vision impairment to use your site 
effectively. It’s best to use other units such as points or 
percentage values for IE. 


34. Using Frames without helpful NOFRAMES content 
The optional <NOFRAMES> element enables you to > 


29. Key tip: Design 


Designing for only one browser or platform 


Users view our pages with a wide variety of browsers and Internet platforms, and most of these handle pages 
differently. Don't be fooled by what you see on your screen: learn to test your work in as many browsers on as 
many platforms as possible. 

But remember: let go of the idea that pages have to look and work the same for everyone. They won't, 
and on the Web, this is fine. HTML isn't a page description language, and it wouldn't be useful for its job if it was. 
Design visually for up-to-date browsers, but also to make sure that everyone can use the content on the site ina 
way that’s appropriate to their set-up. 

The best plan is to identify a core set of browsers and platforms to design for: IE4+, NN6, and 
perhaps Opera 5. Then, separate all the other browsers into two groups; layout capable but not DOM-compliant 


(for example, version 3 browsers and NN4) and text-only browsers (everything else). Ensure that everything 


works as you intend within these groups, and you'll be doing well. 
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The BBC site is a good example of design for multiple browsers and platforms. It works well on all major visual 
browsers, and is also superbly rendered in text-only browsers like Lynx. 
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31. Although the homepage of the International Olympic Committee Website is entirely made of sliced GIFs, it uses ALT text 
to try to make it more accessible. This ALT label isn't going to help anyone, though. 


provide alternative content fornon-frames browsers. 
Unfortunately, all it usually contains is a message urging users 
who may be vision impaired or using a PDA to click here to 
upgrade your browser. Instead, it’s a good idea to include an 
email address, phone number, as wellas links to some content. 


35. Using scrolling text 

Many people can't read text when it is moving or blinking, or 
have difficulty controlling the mouse so as to click on scrolling 
links. It's best not to use scrolling text at all, but if you do, ensure 


43. Key tip: Accessibility 


Failing to design for accessibility 


Many designers work onthe assumption that the Web is a visual medium. This is entirely wrong: it’s only a visual 
medium if designers make it so. 

Images are important, of course, as is the visual design of pages. But if you assume that all your 
users can see, hear and use a mouse, you're missing a big piece of the puzzle. Not only will you design sites that 
exclude people; you'll design sites that simply don't perform as well as they could in all situations. 

Acommon misconception is that you're hamstringing the design fora tiny audience. Wrong: there 
are over 1.7 million visually impaired people in the UK alone (RNIB), and the Web is the only medium which gives 
them a chance to access written information on an even footing. Also, we're talking about using DHTML and CSS 
as part of the solution, which enables you to make more advanced sites. 

Making pages accessible to everyone is a matter of applying a few simple principles, and doesn't 
involve compromising the visual design or performance of a site. All it takes isa little bit of thought, and the 


awareness that this is actually a moral issue as well as a design issue. 


Opposite approaches: USA Today works great in a text-only browser. However, this Lynx screenshot of [w] www. 
johnlewis.com shows images without real text and no ALT tags that would enable us to choose a product. 


ktivie>Untitied Document </titie> 
mata hetp~equive"Content~Type” content"text/html; charset=is0-0859-i"> 


$84,229" rove 
<frwme seo*"b. bemi"> 
<trame src*"cols. heml> 
<fvane sxo*"y .hemk"> 


<body bgvolore"#rrrrrr” cext="¥000000"> 
Your browser does not support frames. <br> 
Please <a nrete"btep!//wvw.microote.com’>click here</a> to upgrade your browser. 
</body> 
/noteamee> 
/ dean» 


34. Typical NOFRAMES content: it would take just five minutes to 
provide the user with a list of links into the site, along with a contact 
email address and phone number. 


that it can be cancelled with the browser Stop button, or pauses 
when the mouse is overthe animation area. 


36. Not providing transcripts for movies or sound files 

Providing a transcript enables vision or hearing-impaired users 
to access content in movies or sound files, while enabling all 
users with slow connections to share the content too. 


37. Preventing the user from changing the type size 

Some users have poor eyesight, and need to enlarge the type 
on screen. Others need to shrink the type to read it comfortably. 
It's important not to lock the type size, such as using fixed-size 
Flash movies, text in images, or pixels as units in CSS. 


38. Using colour combinations known to be difficult 

There are many users with various types of colour-blindness, 
and in their case, combinations of certain colours would make 
the foreground indistinguishable from the background. It’s best 
to avoid the most common colour combinations that cause 
problems for people. 


39. Preventing users from changing the colours 

To support vision-impaired users, you need to enable the user 
to override any colour choices in your site. The best way to do 
this is to use CSS to apply background images and colours. 


40. Saying ‘Click here...’ as the subject of a link 

Don't use the words ‘Click here’ as the subject of a link. Links 
should contain text which describes what you'll get if you go 
there, because screen readers summarise links out of context. 


41. Using tables for layout 
Tables cause problems for screen reader software, users with 


NETWORK ADVERTISING INITIATIVE 


Non-PII (Anonymous Information) Opt-Out 


After you execute an opt-out request today, there may be 
circumstances in which you need to renew or re-request an 
opt-out cookie. To learn more, click hare 


L90 ures anonymous information we collect about your Web 
usage to provide you with advertisements about goods and 
services of interest to you. This anonymous information 
(which does not inclide your name, address, email address. 
telephone number or other personall 

‘5 solely about your visits to Web sites; it helps 

understand your likes and dislikes, so we can ti 
advertisements to you when you visit Web sites with which 
we have 2 relationship, If you would lke mare information 
about this practice and our privacy policies, click here 

F {would like to opt out of this anonymous ontine 
preference marketing service. 


MatchLogic - In the course of delivering online advertising 
banners and services, MatchLogr captures certan 
information about jumer's online activity. This 
‘information includes browser type, Web activity, time of day, 
This wnformation is not personally identifiable and is used 
solely to understand and optimize online advertising 
ipaigns. The benefit te the consumer of this optimization 
‘5 more relevant and less redundant advertising, Jf you would 
tke more information about thes practice and our privacy 
policies, click here. 
© would ike to opt out of this anonymous online 
preference marketing service 


40. NAI offer a useful opt-out service to stop junk mail, but putting links on 
the phrase ‘Click here’ five times on one page means that vision-impaired 
users are needlessly excluded. 
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41.1BM knows its tables make life hard for vision-impaired users, so 
it has put a hidden GIF at the top of the HTML with a link straight into the 
main content on the page. 


smaller displays or PDA browsers, and are ‘linearised’ when 
read with text-only browsers. This means you need to ensure 
that the table content makes sense when read row by row. 


42. Failing to test for accessibility 

Many Web designers are unaware that vision, hearing or 
physically-impaired people need to use the Web, and so never 
test their sites for accessibility. 


Navigation & usability 


44. Using only icons for navigation 


Icons are only helpful for navigation if they need no explanation. 


This is rarely the case, and the choice of icon for complex 
ideas like ‘about us’ or ‘press releases’ is never better than 
arbitrary. Don't use just icons for navigation — offer text 
labels as well. 


45. Making images too large to download quickly 

It's vital to keep image file sizes as small as possible. If the 
whole page takes longer than 30 seconds, people will abandon 
your site. Keep pages less than 50KB, and use lots of real text 
so that useful content downloads first. 


46. Making the user roll over links to see what they do 

It's fine to offer additional information about link destinations 
using rollovers, but users mustn't be forced to point at links to 
find out what they do. 


47. Using clever names for site navigation 
Navigation labels need to be clear and unambiguous, or they'll 


08/18/2001 Metrowarks to offer WWOC peek at 
‘Codewarnor taais 
MacContral 


46. The icons in the top-right use additional explanation in the form of 
rollover hints, forcing the user to point to each to find out what they do. 


simply be ignored. People don't have the time or interest to 
explore links with obscure titles. Remember that because users 
quickly scan the page, they require simple, obvious link text. 


48. Linking people's names or navigation elements to 

MAILTO: links 

Links on people's names ought to go to a personal biography, 
not an email address. MAILTO links cause users to be taken into 
another program, losing the current window, and should only be 
used on text that’s an email address. 


49. Linking to pages that have no content 

If there's no content on a page, don't make a link to it. It’s 
better to have items in a navigation bar that aren't linked yet so 
people know something will be along later, but don't link to 
empty pages. 


50. Pop-up windows that load too slowly 

In an automatic pop-up window, ensure that you use a 
minimum of graphics so that the user has a chance to realise 
what the content is before they close it. You have about 
three seconds... 


51. Pop-up adverts with no memory 

It's a major irritation when pop-up adverts keep appearing on 
every page, or when users revisit the home page. Use cookies to 
keep the pop-up closed once it’s been dismissed. 


52. Not linking pictures associated with navigation links 

When icons, photos or illustrations accompany text links, some 
users click the text and others click the image. It’s important to 
put the link on the image as well as the text so that users can 
find the link easily. 


53. Not ensuring that the user knows where they are 
Provide clear information on each page about where users 
are in the site. It’s important to ensure that the current 
page has an obvious heading, and also indicates which 
section it’s in. 


54. Breaking the Back button 

In navigation terms, the Back button on the browser is the 
user's parachute. It's important not to break it by opening 
new browser windows or using forced page redirection, 
otherwise the user will be unable to retrace their steps when 
they have to. 


55. Making forms that require inappropriate fields to 

be completed 

Forms can force certain fields to be completed, but you have to 
ensure that the form doesn't force information to be entered if 
it’s not relevant. 


56. Not having a search facility 
Allsites need a search feature unless they’re just a few pages 
in size. 


57. Having a search facility that doesn't work well 

Around 50 per cent of site visitors turn to a search feature 
within seconds of arrival at a new site, so it’s important that the 
search engine searches the whole site by default, and returns 
results in a useful way. 


58. Broken links 

Make sure that any broken links on your site are fixed as a 
matter of urgency. Check external links and remove or amend 
them if they don't work. Try not to move things around on your 
own site so that inbound links don't get broken. > 


58. A symptom of link rot: the customised 
File Not Found (Error 404) page here isn't 
much substitute for the article the user 
was trying to reach. It could be improved 
by adding a search feature. 
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59. The DHTML menus on this attractive homepage erupt unexpectedly 
from the coloured panels in the middle of the screen. 


59. Creating your own user interface elements 

Creating new interface techniques using Flash and DHTML is 
exciting but can turn off users. Many users won't bother or 
won't be able to learn how to navigate the site. 


60. Creating your own scroll bars 

Scroll bars have to work just as the real ones do to enable users 
to access the content properly: this means they should grey out 
when all the content is visible. The user shouldn't be forced to 
learn new techniques such as hovering to scroll. 


61. Not having a site map 
Site maps let users see at a glance what there is and how it’s 
organised. They're one of the best tools you can give your users. 


77. Key tip: Navigation and usability 


Making sites that are too slow 


Slow performance is the main reason that users leave sites. Often the problem is caused by graphics that are 
too large, but sometimes it can also be caused by having too many small images. With functional sites, the 
performance of the database and application servers is often the problem. 

It's sometimes hard for the designer to understand the utter frustration that a user feels when the site 
won't respond to them. It isn't really about sites being fast or slow: it’s about something being there when the user 
wants it, or not. The best analogy is candidates attending a job interview. If five turn up, one of them will probably 
get the job, whereas a sixth who may have had better presentation, experience or skills, but didn't show up, will 
not. Regardless of other considerations, your site has to be there when it’s needed, and the faster it responds, the 
better the user will like it. 
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This is an attractive site but it’s just too slow. The homepage downloads 185KB of data, not including the navigation 
buttons. Every page executes 148KB of JavaScript code as it displays. Choosing products is tricky, too: the product 
page offers instructions which, followed literally, prevent you accessing more information. 


62. Making a site map into a graphic 

The site map is meant to be a hierarchical list of text links, 
outlining the structure of the site. If it's made into an image, it 
won't be accessible when it’s needed most. 


63. Not having an index page in a large site 

An alphabetical index to the content of a large site enables 
users to navigate directly to topics of interest without having to 
use the search engine or traverse the hierarchical navigation. 


64. Not linking the logo to the home page 

Visitors use the logo as a home button. Always make sure you 
link it to the homepage; this doesn't stop you having other 
navigation for the homepage as well. 


65. Referring to something else on the site without linking to it 
It's important to make links to other parts of the site wherever 
appropriate so that users don't have to try to navigate the whole 
site structure trying to find something. 


66. Opening new browser windows for no apparent reason 
Opening a new browser window is a major disruption to the 
user's experience. Ideally, it should only happen when the 
user needs to see the previous page and the new page at the 
same time. 


67. Not providing clear navigation back to where the user 

came from 

When the user follows links down into the site, it’s essential to 
provide an explicit link to the parent page. Don't force users to 
use the Back button if they don't have to: this is poor design. 


68. Making links that go some place other than expected 

It’s important that users get what they expect on the other end 

of a link. The most serious example of this problem is putting 
links to other sites in the navigation system or in the body text of 
the homepage, where users expect to be taken into the current 
site. Make it obvious before the user goes there that a link 
leaves the site. 


69. Putting too many links in a navigation bar 

Generally, putting too many options in one place confuses users 
and slows them down. Restrict the number of choices to around 
ten at the most, and group larger lists of options into categories 

described by headings. 


70. Putting too many items in a select menu 

Ensure that dropdown menus contain only related items, and if 
the menu contains a lot of items, make the dropdown menu into 
a scrolling list object showing at least five lines at one time. 


71. Creating dead ends without onward navigation 

It’s frustrating for users when they find themselves at a dead 
end: providing a set of ‘see also...’ links helps users get more 
from your site - especially if they contain references to other 
useful resources on the Web. 


72. Not offering links to other major site sections 

Users have difficulty remembering options they have seen 
previously, so keeping important options in view helps 
usability. It’s often helpful to provide links to the main pages of 
the major site sections on every page, provided it doesn't take 
up too much room. DHTML menus are sometimes a good 
compromise here. 


73. Having a search link instead of a search box 
Users are able to find information more easily when you offer 
them a search box on every page. Going to another page to 
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74. Note the search box in the lower-right corner. Not only is it in an 
entirely unexpected Location, it’s too small to encourage users to enter 
sufficiently accurate search terms. 


search discourages many users from attempting a search, 
making the site more difficult to use. 


74. Making form fields too narrow 

Most fields provided for users to type into are too narrow, and 
users tend to type only as much as they can see. This makes 
search much less efficient, for example, because users then 
don't use enough search terms and receive unmanageable 
numbers of results. 


75. Not making the next step obvious 

Where users need to complete a series of steps, it’s important 
to make the option to move to the next step obvious. Typically, 
the right option may be obscured by poor layout, too many 
alternative links, or by being located ‘below the fold’. 


76. Making mailing list sign-up fields look like search fields 

lt causes problems when other text entry fields are positioned in 
the places users expect the search box to be, so avoid placing 
non-search forms in the top-right corner or the top of the left 
column below the logo. 


Content 


78. Not saving images as GIF or JPEG 

It’s essential to save all images as either GIF or JPEG. Although 
other formats may work in your browser, only these two are 
supported by virtually all the browsers in regular use. 


79. Not using GIF and JPEG correctly 
Saving photographs as GIF makes them dithered or posterised 
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81. This Finnish student hates ‘under construction’ images so much he built 
this page as an ironic statement. 


and greatly adds to file size. Saving other sorts of artwork as 
JPEG introduces artifacts, excessive blurring and makes 
colours muddy. In general, be sure to use JPEG only for 
photographs, and make everything else GIF. 


80. Saying ‘Best viewed with...” 

In the early days of the Web, when people started using 
proprietary Netscape tags on their pages, they would say on the 
site which browser you had to use to view the site successfully. 
In professional Web design, you should aim to make the site 
useful in any browser. 


81. Saying ‘Under construction...’ 

Most Websites are ‘under construction all the time; you don't 
need to say so. If the site is live, the content should speak for 
itself. Don't put anything up that you don't want people to see. 


82. Not fixing spelling errors and typos 

Grammar, spelling and punctuation matter as much on the Web 
as they do in print. It looks really bad for the organisation if 
there are typos left on the site. Most Web authoring software 
includes a spellchecker, and all pages should be proofread 
before they go up. 


83. Re-purposing text straight to Web 

Copy written for print isn't usually suitable for re-using 
directly on the Web. It's important to keep paragraphs 

short, restrict them to one topic, and break up the content with 
lots of subheads. Use the ‘inverted pyramid’ style of writing so 
that the conclusion comes first and then provide progressively 
more detail. 


84. Not setting page titles properly 

It’s important to ensure that all pages have sensible titles 
that contain the site name and describe the page. Titles 
show up in the title bar of the browser window, but are also 
important in search engines, and are used as the title of 
bookmarks or favourites. 


85. Not adding new content 

If you never add new content to your Website, it looks like your 
organisation may no longer be in business. Users tend to revisit 
potentially useful sites about as often as they think they are 
updated with new content. 


86. Leaving out of date information live 

It is imperative to remove time-critical information as soon as it 
becomes out of date. You can use server or page scripting to 
remove such content automatically. 


87. Not dating content 

Pages can hang around for many years, and it’s essential for 
users to be able to judge how relevant the content is still likely 
to be. If you never update your content, then it makes you look 
bad to have old dates on the pages. The answer is to review 
information regularly and put a ‘reviewed date’ on the page. 


88. Poor site structure 

On the Web, it’s important to make sure the content is 
structured in a way that makes sense for the users. Fit it to their 
needs and preferences, not functional divisions within the 
company. If possible, use a strict hierarchical structure, with 
local linear navigation where the user needs to complete a 
series of steps. 


89. Relegating news to a news page 
Many sites relegate news to its own page, and just link to it from 
the homepage. While there's nothing wrong with having a > 


89. The Home Office relegate news 

items to this page as a mixture of HTML 
and PDF. In this circumstance, it would be 
a good idea to a offer a link for each PDF 
file to [w] http://access.adobe.com, 
where there are free automated online 
tools to enable people without Acrobat to 
access the content. 
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92. Most lenders offer mortgage 
calculators using HTML forms, but this 
company chose to provide this 
functionality in Director Shockwave. 
There's no reason not to use HTML here, 
but even Flash would have been a better 
idea; Shockwave has a relatively small 
installed base and a cumbersome 
installation process. 


news page, it’s important that any news stories are presented up 
front on the homepage. Users rarely visit the news page unless 
they are already interested ina story. 


90. Using Java for navigation or essential content 

Java applets are sometimes useful, but users often disable 
Java, or applets may be barred by corporate firewall software. 
It's essential to make sure that the page is still usable if applets 
cant run. 


91. Using platform specific characters 

Watch out for special characters because these may be 
displayed incorrectly when pages are viewed on other 
platforms. Typically, you'll get problems with smart quotes, em 
dashes, trademark and registered symbols. Replace these with 
HTML character codes instead. 


92. Using Director Shockwave instead of Flash 

It's important to use Flash for Web work in preference to 
Directorwhenever possible. This is because of Flash’s 

better download characteristics, higher installed base, 

and much easier installation process for users who don't have 
the player. 


93. Not having email and phone contact information accessible 
from every page 

It's important for users to be able to contact the organisation 
using conventional means if they have trouble using the site 

or finding what they want on it. Make sure that every page 
contains contact information ora clear link to obtain the 
phone number, email address and physical address of 

the organisation. 


94. Not providing a route for users to report problems 
The first people to notice problems are generally the users. 


101. Key tip: Content 


Not supplying content as HTML 


Adobe Acrobat POF files are not universally accessible. Nor are Word documents, Flash movies, Director 


Shockwave files, PowerPoint presentations, Excel spreadsheets, QuickTime movies, AVI files or Java applets. In 


fact, the only thing you can be sure your audience will be able to use is HTML. 


Don't be fooled by manufacturers’ claims of near-universal compatibility for any other format. Remember, 


‘most’ is not ‘all’. 


Apart from exceptional cases such as games, you shouldn't provide content only ina proprietary or restrictive 


form, because it inevitably excludes some portion of the audience who don't have access to the right software. 


Even then, it makes sense to use the most widely supported format that does the job. 


This isn't to say that you shouldn't offer content in PDF, Flash, Shockwave or any other format that adds value for 


some users. The point is you shouldn't only offer content in these formats because this adds value for some users 


at the expense of others. 


www.paulsmith.co.uk 


Flash sites are the most widespread example of restricting access to content by using a proprietary format. It’s a 
good design to offer an HTML alternative, and with data driven sites it's cost effective too. 
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Make sure that you provide an easy method for them to report 
any problems, such as a link at the foot of each page. 


95. Not acting on reports of problems 

When users report a problem, they usually check back to see if 
it has been fixed. If the problem is still there, it makes it look as 
though your organisation doesn't care. If you fix it straight away, 
then the user feels valued and your organisation will go up in 
their esteem. 


96. Using Flash without browser detection and alternate content 
Flash has become a standard to such an extent that it is the 
most widely supported rich content type on the Web, and most 
people have a reasonably recent player. ‘Most’ is not ‘all’, 
however, and it’s likely that at least 10—20 per cent of your 
audience don't have the right player. Make sure that alternative 
content is available as GIF or HTML, and display it automatically 
if the Flash player isn't available or let the user choose. 


97. Not saying which countries you do business in/with 

It's easy to overlook the fact that the first two Ws in WWW mean 
exactly what they say. Your site is available worldwide and users 
need to know whether you deal with their country. This is 
important whether you do or don't, so ensure that you explain 
your policy somewhere central as well as wherever users can 
submit orders or queries. 


98. Not providing enough information 

One of the great cost benefits of a Website is its ability 

to relieve some of the burden that comes from answering 
queries, particularly for pre-sales and support issues. 
However, many sites just don't hold enough information, so 
users that try the Web first are still forced to phone up and hold 
in a queue — which helps no-one. Make sure that all relevant 
information is available on the Web, or the site won't succeed in 
reducing costs. 


99. Not providing historical information 

It's surprisingly important to retain information on your site 
even if the products it relates to are no longer available. People 
buy and sell equipment for many years after it's withdrawn from 
the product line, and it costs almost nothing to make your 
Website a rich repository of all the information that exists for 
obsolete products. 


100. Not enough functionality 

Even ‘brochure-ware' sites can include rich supporting 
information that helps to answer pre-sales enquiries, or useful 
features like branch locators, comparison charts and links to 
other helpful sites. GEES 
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94. A page like this is an excellent way to encourage users to alert you to 
any problems they're having, and perhaps keep a customer. 


web-theatres 


portable training solutions 


Would you like your Macromedia or 
Adobe training in-house but don’t 
have access to a training room? 


Let Symbiosis run the course at your offices and take 
advantage of web-theatres, our go anywhere training 
facility. 


A fully portable training facility for up to 6 delegates. 
Your staff will get high quality training, without the 


inconvenience and high costs of being away on a course. 


Call Rebecca now for full costs and availability on 
01926 436937 or email training@symbiosis.com. 


Authorised Macromedia & Adobe training provider. 


www.web-theatres.com 


Accura Imaging 


pop-up displays, banner stands, 


exhibition panels, posters, 
floor graphics, POS displays, 
backdrops, backlit displays 
and much more... 


+ Large format digital printing and finishing service 
+ Comprehensive range of portable display systems 
+ Superb quality at competitive prices 


www.accuraimaging.co.uk  @ DisplayGraphics 
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Accura Imaging Ltd. tel:01707 660055 fax: 01707 660052 isdn: 01707 658566 email: sales@accuraimaging.co.uk 


Authorised by Adobe, Extensis, Macromedia, 
Media 100, QuarkXPress 


Since 1989 
corpsneeds@corps.co.uk 
www.corps.co.uk 
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Getting started with 
Dreamweaver 4 


Putting together your first Web pages could be easier than you expect. 
Dreamweaver 4 provides a fast track to Web success 


reamweaver is one of those 

4 rare programs that appeals 
; to beginners and experts 

\ alike. It has a depth and 
complexity that emerges through 
prolonged exposure, but it also works 
pretty well straight out of the box. The 
most basic features haven't changed 
much in the last few years. The program 
has three important areas: the main 
document window where all the building 


gets done; an Objects toolbar that lets 
you place different kinds of content into 
your pages and a Properties panel that 
lets you change the individual 
parameters of that content. Although 
there's quite a bit more to discover, these 
are the only parts of the program you 
need to familiarise yourself with to start 
creating your first pages. 

In this tutorial we're going to create a 
simple page design. It won't have any 


content in it (unless you put in some of 
your own) but in that process you'll cover 
all the basics of page creation, from site 
configuration to publication. You'll learn 
how to place images, use tables for 
layout, format text and use simple 
applications of cascading style sheets as 
you go. In fact, you'll come out the other 
end with enough knowledge about 
Dreamweaver 41to start building your 
own pages straight away. 


Part 1: Getting started 


Dreamweaver 4 opens with a blank canvas. Make your mark 


from the start... 


Table fix 


You'll notice that you can't resize 
cells past existing fixed cells. 
When this happens, you have to 
resize the cell numerically. When 
you have a fully defined table, 
the best way to resize cells is to 
switch to Standard view and 

enter the values manually. 


Colour schemer 


If you're stuck for ideas 

about how to compose a colour 

scheme for your site, visit 

[w] www.colorschemer.com/ 

online/ for an online tool 

that helps you choose 

compatible hues. 

Start Dreamweaver with a new document, 

1 then go to the Site menu and choose New 
Site. Browse to an appropriate place on your hard 
drive and create a new folder to put the site in, 
naming it using lowercase letters. Name the site 
FirstSite and click OK. 


Look at the Objects toolbar and find the 

Layout View icon at the bottom of the panel. 
Make sure it’s on. Select the Draw Layout Table 
button on the Objects toolbar, and click and drag in 
the document window to draw a layout table. In the 
Properties panel, set the width of the table to 700, 
and its height to 400. 


Click within the first cell to place to place the 

flashing text cursor, then import the logo.gif 
image from the CD into the cell. You can do this by 
going to Insert>Image menu, clicking on the Insert 
Image icon in the Object panel or dragging and 
dropping the file from the Site window. 


In the Site window, make a new folder called 

Images. Within Windows Explorer or the Mac 
Finder, drag and drop the image labelled logo.gif 
from the cover CD to this folder. 


Select the Draw Layout Cell button in the 

Objects window. Draw a table cell halfway 
across the top of the table. To draw multiple cells 
within a table, hold down the Ctrl key in Windows 
or Command on the Mac. Holding down Alt or 
Option disables snapping. 
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8 | Click on the first cell to select it, then use the 
handles to resize it to fit the image exactly. 

The Properties panel should read 270x70 pixels. 


EY Switch back to the blank document that 
Dreamweaver launches with. Go to 
Modify>Page Properties. You can set text colours 
and link properties in the dialog that appears, but 
the defaults are fine. Give the page the title FirstSite. 


G Add a second cell right next to the first, then 
add a narrow bottom row across the length of 
the table immediately under the first two cells. You'll 
notice that faint guidelines have been added to the 
page where there aren't any cells — these will come 
in handy later. 


9 | Resize the remaining cells. You can make 
numeric adjustments using the Properties 
Inspector to change the height and width values of 
the cells. The second cell should be 430x70 pixels 


and the row below 700x30 pixels. > 
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Part 2: Adding text, links and formatting 


Amending the style sheet automatically sets up text rollover 
effects for links within your page 


Smart styles 


We chose to use pixel 
measurements in our CSS 
formatted text for the sake of 
cross-platform compatibility. 
Dreamweaver 4 also enables you 
to create reusable HTML styles 
that combine the flexibility of 
style sheets with the 
compatibility of standard HTML. 


Sans serif 


Fonts without fancy bits are 
more readable on computer 
screens. The fonts we specify 
here, Arial and Helvetica, are the 
most popular sans serif fonts on 
Windows and the Mac 
respectively. If by any chance 

a user encounters the site 
without these installed, a generic 
sans serif font is substituted. 


In Layout view, place the cursor in the second 
cell. Type in the phrase ‘The Technology News 
Site’. Select the cell and go to the Property 
Inspector. Set Horizontal alignment (the box labelled 
HORZ) to Center and Vertical alignment (the box 
labelled VERT) to Middle. 
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Select the row below the two top cells. In the 
Properties Inspector choose Bg to set the 
background colour for the cell. Use the Eyedropper 
tool that appears to select colour directly from the 

logo image on the page. 


7 Go to the CSS Styles panel and create a New 
Style. Choose Use CSS Selector and select 
a:link from the dropdown. Ensure This Document 
Only is ticked before you click on OK. In the Style 
dialog, set the font as Arial, Helvetica, sans-serif, 
Size to 14 pixels and Decoration to None. Set the 
Type Colour to Black. 


Go to Window>CSS Styles to open the CSS 

Styles panel. Click the arrow in the top-right 
corner of the panel to access a menu. Choose New 
Style. Name the style .logo and leave Make Custom 
Style (class) selected. Select This Document Only, 
then click on OK. 


5 | Switch to Standard view so that you can split 
the table cell. Place the cursor within the cell, 
then go to Modify>Table>Split Cell. Split it into two 
columns. The cell splits along the guides that are 
already in place. Switch back to Layout view. 


8 | Click OK then create a second new style 
using CSS Selector. This time choose a:hover. 
Set the style parameters as before except change 
Decoration to Underlined and set the colour to a 
light blue. These style sheet amendments 
automatically set up text rollover effects for links 
within your page. 


In the next dialog, select Type in the category 
list. Set the font for the style to Arial, Helvetica, 
sans-serif. The size should be set to 24 pixels, 
Weight to bold and Decoration to None. Click OK 
when you've finished. Select the text and apply the 
style by double-clicking on Logo in the Styles list. 


In the newly split cell, below the logo, type 

‘about | news | contact | archive’. PC users will 
find the ‘I’ symbol just above their Ctrl key. On the 
Mac you can insert it by going to Characters in the 
Objects panel and the Insert Other Character icon. 
Type '&#124;’ in the Insert box. 


Select the word ‘about' in the cell you've been 

working in and type in the link ‘about.html’ in 
the Properties Inspector link box. Add links named 
news.html, contact.html and archive.html to the 
other elements respectively. Click the Preview 
button to test your style sheet text rollovers. 


Part 3: Creating templates and cleaning up 


Templates remain largely unchanged in use, though 
improvements to visual aids make them easier to work with 
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3 | Go to File>Save As Template. In the dialog that 
appears, name the Template ‘main’ then click 
Add two further cells to your page, one taking OK. Make sure that you're in layout mode so that 
up most of the remaining area, at 700x280 Go to Commands>Clean Up HTML. Tick all you can easily select table cells. Select the large table 
pixels and a narrow row below that at 700x20 the boxes except Specific Tags. If you've made _cell in the middle of your page, then go to 
pixels. Set the background colour of the bottom row _ errors during the tutorial, this should clean up any 
to the same red as the logo. mess in your code. 


Modify>Templates. Choose New Editable Region 
and name it content. 


Go to File>New from Template again, selecting 


the template from the list. Save this as The Editable Region you added earlier enables 
Template. Select the template called main about.html. Create further pages in the same way, G you to add content to that section of each 
you've just created. Alter the Title box to read naming them news.html, contact.html and page, including further table cells if necessary. Go to 
FirstSite - Contents, then save it as index.html in archive.html. Preview your site in a browser to see Site>Check Links Sitewide. This checks to ensure 
your site folder. that your links work. that no errors were made when links were added. 


Part 4: Publishing pages 


Uploading files to the Web is as easy as dialing in to your ISP, 
assuming that your ISP is hosting the Web space... 


Template torment : pap eeeanaassmammammns 


We run the Clean Up HTML 
command on our file before 
saving it as a template because it 
then becomes the basis of all our 
pages. Removing Dreamweaver 
comments from template based 
pages breaks them. 


Bandwidth bonus 


Keep an eye on the information 
at the bottom-left of the main 
Dreamweaverwindow. Here ——— ple ai 
you'll see the total size of the ‘ é s 7 i 

page Rte eioigaido an a Switch to the Site window and choose Define In the box labelled FTP Host, type in the 


. : Site from the Site menu. Select FirstSite from address of your Web space. If you don’t know Click the Connect to Remote Host icon to 
estimate ot how tone shout the list and click Edit. Assuming that you're 


hee elaine! ‘ what it is, check the help documentation on your connect. You can now either drag and drop 
; uploading to a Web space hosted by your ISP overa —_|SP’s Website. Your Login and Password details are files from the Local pane on the right to the Remote 
modem, choose Remote Info from the list and FTP usually the same as those you use to dial in to your host on the left, or click on the Put Files icon to start 
from the dropdown menu labelled Access. ISP. Click OK when you're done. uploading your site to the Web. 
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squid soup 


This UK leader in Web games design is already pushing the boundaries of Shockwave's multi-user and 
3D potential: “We're keen on getting that tactility and life and going somewhere a bit different...” 


nthony Rowe and James Lane, co-directors 
and co-founders of squid s 0 u p, must be 
i ; getting an unnerving sense of déja-vu. 

| Graduates of the MA in Design and 
Interactive Media at Middlesex, in 1998 they went 
into the CD-ROM business as squid s 0 up, just as 
CD-ROM disappeared off the face of the Earth. 

Porting their interactive design skills to the Web, 
they've spent the intervening time expanding the 
company’s reputation, staff and portfolio. They've 
crafted experimental interactive games and 
multi-user Web and installation-based experiences 
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for the likes of Intel, Macromedia, Audi and Levi's, all 
the while waiting for the breakthrough in immersive 
online entertainment that was just around the corner. 

But just as Macromedia announced a major step 
forward in the evolution of online games with the 
release of Director 8.5 Shockwave Studio, and the 
advent of ADSL and more processing power at last 
looked like making rich design a reality, the dotcom 
bubble burst, reducing the wave of future work to an 
uncertain trickle. 

While they concede that the industry-wide 
recession has forced them to re-evaluate their plans of 


six months ago, for squid s 0 u p, the pursuit of 
long-term interactive joy continues regardless. “What 
interests us most is interactive design, and in terms of 
user experience | think that’s got the most interesting 
future as faras we're concerned,” James says. “With all 
the convergence of technology that's being talked 
about, | think it’s got the healthiest future too, 
alongside information delivery, which is the flipside 
that people are always going to want.” 

Amid all the ‘What Went Wrong?’ headlines and ‘will 
code HTML for food’ hysteria, the way forward from 
squid s 0 up's perspective is the appropriate use of 


1. Atmospheric photography for the 
Sonar Music Festival, courtesy of the 
multi-talented squids ou p. 


technology combined with more realistic business 
models, leading ultimately to the evolution of 
interactivity. Anthony takes up the baton. “One of the 
reasons we got into games is that interactivity in 
multimedia is still quite primitive compared to the 
interactivity used in games,” he says. “Games seem to 
have the only effective use of interactivity in terms of 
an immersive experience — from Pong onwards.” 


Many tentacles pimping on the keys 
It's clear from evena cursory browse of its Website > 


Wishlist for Director 9 


So what would squid s 0 u p like to see from Director 9? 


3D sound — “We want 3D rendered 
sound, so you've got spatially- 
positioned sound with doppler effects 
and things like that. We'd like 
pitch-shifting, echo and real-time 
manipulation of audio, not just 3D but 
of the sound itself, so that you could 
apply all sorts of effects to it. It would 


be nice to do proper synchronisation 


too; you can synchronise sound in 


Director but it’s a fiddle.” 


Rendering compatibility — “Direct X, 
OpenGL and software rendering of the 


same things are quite similar. But if 
you want a fire effect for example, 
with two images going over the top 

of each other, you can put an ‘add ink’ 
on itall. It gravitates to the right 

and you get this interesting effect, 
but it doesn't work on all of 


the renderers.” 


Behaviours — “A better set of 
Behaviours would be quite good. We 
haven't really used Behaviours to make 
a game by using Behaviours: you have 


to be more efficient. It’s getting there, 


though. If you’re a max designer, it 
would be good to create everything 
in max, use Havok to add the physics, 
import that into Director then drop 
ina couple of Behaviours and make 
their avatar walk around in 3D space. 
Perhaps they're doing that as 

we speak.” 


Promotion — “Macromedia would 
benefit so much from getting a really 
good, really successful high profile 
Shockwave 3D game out there. We'll 
do it if you like.” 
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that squid s o up has developed a very broad 
definition of what constitutes a game, and has many 
sucker-pads to its various tentacles. You're just as 
likely to find 3D revisions of retro favourites (Snake) as 
you are multi-user soundscapes doubling as ethereal 
graphical chat rooms (altzero). What all these have in 
common though, is a snazzy use of Shockwave 3D. 

“The two main areas we've been playing around 
with recently are multi-user spaces and 3D. Certainly 
in Director, neither were feasible when we started, and 
if you’re going to do something multi-user then it 
makes sense to do it on the Web anyway,” Anthony 
explains, adding that 8.5’s server-side scripting has 
opened up the possibilities in this area. 

From the outset, the company has tried to keep 
roughly 20—30 per cent of its time free for R&D 
projects that aren't for a specific brief or client. The 
fruits of this doodling include a 3D engine developed 
using Lingo commands and altzero itself, elements of 
which have been reused commercially. 

With this in mind, the company signed up for the 
Beta testing list for Director 8.5. As a consequence, 
squid s o up has been able to get to grips with 
Shockwave's latest additions, and is impressed with 
the possibilities it opens up for the games market, 
even in an era where next-gen console games enjoy 
Hollywood film-size budgets. “That's kind of where 
Shockwave 3D comes in,” says Anthony. “There's a 
steep learning curve, but it’s not C++... it’s a scripting 
language, not a low-level coding language so you can 


build stuff fairly quickly.” While squid s 0 u p uses its 
own engines for the task, it also sees Director 8.5’s 
addition of Havok physics capabilities as another 
bonus for newcomers. The ability to define physics 
properties in other 3D software before importing 
models for use in Shockwave also offers further 
workflow flexibility for its seven-strong team. 


Now for something completely different 


Designing with performance in mind is the best route 
to unlocking Shockwave 3D in the company’s opinion, 
and as ever, necessity is the mother of invention, 
especially in the multi-player arena, where net-lag is 
the nemesis of many a promising idea. 

“You have to design your games in such a way that 
they can cope with lag and disguise it,” Anthony says. 
James uses collision detection as a case in point. “You 
can do collision detection ina lot of ways. You can 
simplify it, you can disguise it so you don't need to 
worry about two objects actually going through each 
other — just put an explosion in there so you can't 
actually see what's going on or just cut to something 
completely different,” he says. 

These solutions extend to the creation of online 3D 
ona meagre polygon budget, and it can also pay to be 
something of an illusionist. “With 3D you can imply a 
lot without there necessarily being anything there,” 
John explains. “It's kind of tricking the eye and the 
brain into assuming there's stuff there which isn't.” 
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For all this talk of limitations, however, squid soup 
had a taste of luxury when it was called upon to design 
‘Glassworld’, a Shockwave 3D demo game for Intel. 
The console-style feel of the game was perfected 
specifically to showcase Intel’s Pentium 4 chip. “It was 
a dream brief really,” Anthony recalls. “Do something 
that doesn't work ona Pentium 4...” As far as its future 
projects are concerned, the company hopes that 
Shockwave 3D’s ability to bring high-quality 3D to the 
masses will challenge the corporate stranglehold on 
game concepts. “You don't have to spend multi-million 
pounds to make a game in Shockwave 3D,” Anthony 
says. “So the possibility’s there for more arty games, 
and fewer shoot-em-ups, with more imagination going 
into the gameplay and structure.” EEE) 
NFormoreonthe squids, check out their feature in issue 62 of 
=) oman Shockwave 3D demo 


3ds max 4 
Flash5 
Director 8.5 


Photoshop 6 
After Effects 4 
Premiere 6 


Tips for exporting W3D files from 3ds max 


Some pointers courtesy of squid s 0 u p: 


* Scenes need to be exported from the Perspective window. To do 
this, simply make sure the Perspective view port is selected 


before you export your scene. 


* The Scene Export Options window that appears next includes a 
number of options for the quality of, and components included in 
the export. 


* Compression settings enable you determine the quality of the 
geometry and textures. A value of 50 for geometry and texture 


quality is sufficient for most scenes. 


“It's useful to puta tick in ‘View W3D scene after export’ to get an 


idea of what your scene will look like before you import it into 
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Director. When this export window appears, rotate your scene by 
clicking and dragging the mouse, zoom by holding down the 
Control key and dragging, and pan by holding down the spacebar 
and dragging. 


* The File Analysis window tells you the file size of the exported 
model and how this is split between the various components of the 


scene: textures, lights, animations and so on. 


«The Texture Memory value at the bottom of this window indicates 
the amount of memory needed at runtime to process textures in 
the scene. It is beneficial to try and keep this value as low as 
possible, especially for running your 3D movie on machines with 


low memory graphics cards. 


ewe © wtewe 
10-17 August 2001: come and 

00 us at SIOORAPH mapace 

art gallery clients 
10-48 dune 2001: alteere 


featured at Valencia Biennial 
‘and Sona’, Barcelona cK. 1 © guras 


1618 May 2001: Teenoarte 
altenro presented at this years 
‘Newwue’ event 


wetive 


ooooo0000000 


1, Immerse yourself in altzero, squid s 0 u p's 
multi-user Shockwave chat room-cum-spatial 
soundscape experiment. 


2. ‘Pirate Quest’ is a console-esque role-playing 
game showing off squid s ou p's 3D talents. 


3. This tank variant uses a sophisticated aim and 
fire control method and stylised retro arcade 
graphics to power its fiendishly addictive gameplay. 


4. Games design comes full circle in this 
Shockwave 3D reincarnation of an all-time 
serpentine classic. 


5. Let them eat cake in this gingerbread 
man-centred 3D novelty that appears in 
Macromedia's 3D gallery. 


6. ‘Twisted Boy’ is the digital version of the dancing 
figure in Levi's ‘Twisted-to-Fit’ TV ads. Unlock his 
dance moves at [w] www.twistedboy.tv/ 


7. The main image on squid s 0 u p's site changes 
every hour to showcase a range of imagery. 


8. ‘Glassworld’ was commissioned by Intel to 
showcase its Pentium 4 chip. 
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Enable users to navigate your pages quickly and 
easily using DHTML Menu Builder 2.8... 


sability is arguably one of 
( the key issues that needs to 
i be taken into account when 

designing any kind of 
interface. A Website is an interface and 
anyone browsing your site needs to be 
able to navigate through the pages 
quickly and easily. They need immediate 
access to information such as FAQs, 
ordering and contact reference material 
and more. 

If you've taken a look at the Computer 

Arts Website ([w] www.computerarts. 
co.uk) recently you'll notice a set of 


navigation menus that stretch across the 
top of the page. Whichever page you're 
visiting, the navigation menus should be 
present and enable you to quickly 
access any information you require. 

The snag is, how do you go about 
creating these menus for your site, 
without having to delve into JavaScript 
or Flash? 

With this issue of Computer Arts 
Specials, we've covermounted the full 
version of DHTML Menu Builder 2.8 on 
the CD, along with a tutorial to get you 
creating dynamic menus, quickly. 


Part 1: Menu structure 


Before creating your dynamic menus, it's a good idea to draft 
your hotspot images and menu commands out on paper ... 


Flash menus 


There are other ways of 

creating dynamic menus for your 
site — you could use a Java 
applet, code your own JavaScript 
or use Flash. Go to 

[w] www.computerarts.co.uk/ 
tutorials/type/tutorial.asp?id=3 
0426 to follow our extensive 
tutorial on creating our Website 
menus using Flash. 


Future expansion 


OHTML Menu Builder makes it 
easy to expand your dynamic 
menus at a later date. Create the 
additional image hotspots as 
required and then import your 
existing project, Add the 
necessary groups and 
commands and attach these to 
the new hotspot images using the 
Hotspot Editor. Save your 
updated project. 


@ Before you create your dynamic menus, it is a 
good idea to draft your menu structure using 
pen and paper so you can create the required 
hotspot images and the commands needed to make 
up your menus. 
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Import your hotspot images for each of the 

table columns you have created within your 
HTML editor. If you're competent enough, edit the 
HTML source code, removing the table width, and 
make sure each column is equal to the width of the 
images you've imported. 


Sa DNIME Mon Buddter : (Mati) In Inn 


Add the commands to your groups as required, 

making sure each command has a caption 
(which is the text that appears within your menus). 
If you want to add a separator between commands, 
go to the Menu menu and select Add Separator. 


2 | You'll need to create the images that form the 
hotspots for your menus. Take any image 
editor, such as Photoshop, and draw a hotspot for 
each menu (Products, About, Links and so on) that 
you require. Save the individual images, including 
mouseover images. 


= Propet Propestior 


Move over to DHTML Menu Builder and start 

a new project. Go to the Project Properties 
option, give your dynamic menus a name, select the 
folder where your menus will be created, choose the 
HTML file and use this file as your final output. 
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You can assign an action to the commands 

within your menus. If you wanted to add a 
URL link, click on the command, go to the Action 
box and enter the URL with a ‘http://’ prefix so that 
the menu looks for your URL remotely. 


3 | Within an HTML editor (any HTML editing 
package), create the code required to place the 
images within your pages. Define a table (in this 
case, three images requires three columns). Don't 
worry about table width and leave the border as ‘0’. 
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G Define the groups within your menus. Our 
example has three menus: Products, About 
and Links, so create a group for each of these 
menus. You can create further groups for submenus 
and the commands that make up your menus. 


9 | At this stage of your menu creation, you can 
preview your menus to see how they'll work in 
a Web browser. Go to the Tools menu and select 
Preview. This uses the IE engine to display your 
menus. Select an alternative background colour 
where required. > 
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Part 1: Menu structure continued... 


Upgrade offer 


Upgrade to DHTML Menu 
Builder 3 and save $15! Readers 
of Computer Arts are entitled to a 
special upgrade offer courtesy of 
xFX JumpStart. You can upgrade 
to DHTML Menu Builder v3 for 
the specially discounted price of 
$50 —a saving of $15. To take 
advantage of this offer, go to 

[w] http://software.xfx.net/ 
utilities/dmbuilder/up230.htm. 
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The colour scheme of your menus can be 

defined by going to the Menu menu and 
selecting Color. From here you can change the text 
colour, the menu's background colour and when 
your mouse is over a command with the menu. 


Apple.com 


Image ~ lop_ Produc 


13 Images can be added to your menus, located 
on the left or right-hand side of a command. 
For instance, you may wish to add an arrow image 
to a command which launches a submenu, to show 
a user that a submenu is available. 


Once you are at a stage where your menus are 

completed, you can use the HotSpot Editor to 
assign menus to the hotspot images created earlier. 
You can align the menus to your hotspot images, 
with bottom/left as the default. 


Font - [op_Links/Appley) ro 
Normal) - Mouse Over 


| 


Tahoma, 14 | Tahoma, 14 


Alignment 
7 Saami 
Apple.com 


Loc] _comat | 
11} The default font is set to Tahoma 9pt, which 

may not fit in with the font scheme within 
your page design. Go to the Menu menu and select 
Font. Select a font (and font size) for normal and 
mouseover text. Choose the alignment of the font 
within your menus. 


Special f tects (qe Productay 


14 Special effects can be added to your menus. 
Go to the Menu menu and select the Special 
Effects option. Within this window, you can choose 
the opacity and transparency of your menus, 
whether you want a sunken effect and the border 
size around the menus. 


+ Project Properties 


After completing your menus, change your 

project properties so that the code is optimised 
and debug information removed. Go to the Project 
Properties>Advanced tab. Select [FINAL] Small and 
Fast Code within Code Optimization. 


» Cursos » Lop Links /Appihdy))) 


@ You can define the type of mouse pointer that 
is displayed when your mouse is over a 
command within your menus. The default is a hand 
pointer (which is the standard pointer used for all 
interfaces) but you can choose an alternative. 
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15 If you're competent with JavaScript, you can 
use the Addin Editor to write additional 
functionality for your menus. Go to the Tools menu 
and select Addin Editor. The editor has a list of 
pre-set commands for you to choose. Do not 
remove commented lines. 
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18 | You'll need to re-run code compilation to make 
sure your code is optimised. Click on the 
Compile button and DHTML Menu Builder will 
update your code. You can save your menus project 
and then alter your menus at a later date. FEES 
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Design timeline: 
wWW.quinnessworldrecords.com 


A week-by-week look at how Theory7 took on the Guinness World Records site and created a 
new online presence entirely in Flash... 


Thumbing through the Guinness Book of Records 
remains a popular pastime for every schoolboy and 
statto in Western civilisation. Humanity will never 
lose interest in finding out the weight of the world’s 
fattest man, or the diminutiveness of the world’s 
smallest woman. 

What has changed, however, are they ways by which 
you can access this information. Guinness World 
Records has recently had its site redesigned from the 


ground up. As reported in issue 62 of Computer Arts, 
the job was tackled by a tiny Web design studio called 
Theory. The company is run by designer Nevil Slade, 
and he’s produced the site entirely in Flash. 
“Guinness World Records is a multimedia property. 
The site works in tandem with the new edition of the 
book that contains Web features and links to the 
community section on the site,” says Simon 
Rasalingham, the Guinness director of Web 


technology. “The brand can be accessed via the book, 
Web and TV — each facet working together to enhance 
the brand.” 

Read on to find out how the site came together as a 
design project, over ten weeks... 
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About Theory7 


It's about business, 
and design 


Theory7 evolved out of a new media 
design group called Twilomedia. 
Basically, Nevil Slade went solo, 

and brought his sister Nadya into the 
business. Guinness World Records is 
by far the company’s biggest project, 
and Nevil remains devoted to it. But 
he’s also devoted to the Flash 


community, and continues to evolve 


the Theory7 site. 
“It’s a community thing as well 
as a sort of work in progress. The 
Flash community craves new designs 
from the top designers. They visit your 
site and if you're developing a new 
version they say, ‘we're waiting, we're 
waiting’. | believe in the design 
community just as much as | do in the 
business side of it.” 


Currently, Nevil is looking to 


recruit another top Flash designer. 
You can contact Theory7 at: 

[e] nevil@theory7com, 

[Ww] www.theoryZ.com or 

[t] 01727 852886. 


Global Flash is a Flash community 
site Theory7 is working on. 


The initial brief required a ‘techno’ and streetwise 
style, so computery fonts and 45-degree angles 
were used to create this effect. The information in the 
site is broken down according to the main categories 
in the Guinness Book of Records, each of which has a 
main section screen. A 3D navigation console was 
modelled in 3ds max 3.1 and exported to SWF using 
the /llustrate 5.0 plug-in. 
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During week one, Nevil began working on the idea of 
using video in Flash, and demonstrated this using a 
video window with VHS-style controls. He also built 
the first demo of a record ticker which displayed 
records from a list of 100 popular world records from 


the Guinness database. 


Week two 


After the first review meeting with the client, several 
large design changes were tackled. Firstly, four 
columns were introduced, the leftmost column being 
a feature column, with the other three having a 
different appearance. Pictures were added as 
headers for each column. Though intended to be 
animated, they were static at this stage while other 
design details were ironed out. Guinness World 
Records requested a variety of new sections including 


games, top videos and so on. These were added. 


GUINNESS 


WORLD RECORD 


Another piece of feedback from the first review 
meeting was that the colours were a bit pasty. Nevil’s 
original idea was to tint the colour scheme to match 
the main photo onthe page but this wasn't taken 
further and a more defined colour scheme was sought. 


The Theory7 site evolves constantly 
and will reach version 7 soon. 


Acolumn-based menu system was designed, with 


menus dragged in and out vertically, enabling the user 
to hide them when notin use. Text scrollers and 
animated menu extenders were also created. The 
team experimented with sharper screen fonts, but 


these weren't up to scratch. 


Twilomedia was Nevil Slade's first 
Web design venture. 
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Week three 


GUINNESS 


WORLD RECORDS 


In week three one of the first jobs was to continue 
developing the colour scheme to make it bolder. 
The navigation system was matched with the 
general interface and shadows were added to the 
graphics to strengthen the layered feel. These 
shadows were removed in later stages, then 


re-implemented as the design ideas solidified. 


GUINNESS 


WORLD RECORDS 


COMPUTER GAMES 


In week three, Guinness and Nevil said goodbye to the 
3D navigation console and opted for a simpler- 
looking system. Buttons were implemented, with 
more space for advertising. The video-style controls 
were removed from the daily feature: however these 
re-appear when there is video to be played, and link 


to a page where the video can be viewed. 


GUINNESS 
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As you can see, a simpler navigation system was 


added in week three, with the nine main sections 
based on those of the book. The ticker was made 
larger and clearer, and Guinness World Records 
requested that the logo sit on a darker background to 
make it more prominent. Nevil began experimenting 
with ways of displaying the nine main section links, 
with each section having a subsequent 20 links. The 
animated menu concept was introduced. In order to 
best use the space, and to avoid pop-ups or page 
changes, the menus move up into the screen, or down 
off the screen when a new page is chosen by the user. 
Standard Flash tools weren't appropriate so 
ActionScript was used to reposition the menus on and 
off the screen. Some inertia code in the ActionScript 


ensures smooth movement. 


Week four 


Moving into week four, a feature was added to the 
buttons to improve the user experience and to help 
them feel in control of the site. They now turn red 
when they have been clicked. This avoids the problem 
of users feeling lost, as they do with many large 
information-based sites. “The beauty of it is that you 
are able to browse thousands of pages but always feel 


you are on the first page,” comments Nevil. 


Up until now, the designer has been making slight 
modifications to the colour of the site, enabling the 
client to see different looks and feels and decide 
upon one. At this stage a colour changing system was 
added so that Guinness World Records could change 
the colour themselves and report back with their 


favourite RGB values. 


To round off week four, a new version of the main 


section pages was designed with photographic icons 
representing each category of records. New colours 
were tested, and a bold red colour chosen but not 
settled upon. The scroller was also changed froma 


click up/down one to a draggable version. 


Week five 


GUINNESS 


WORLD RECORDS 


Now Nevil changes the colourto his own favourite: 


orange. A change is made to the interface design at 


the top left so that it looks Like the display window is 


hanging down from an arm. 


The record homepage idea was developed in week 

five. It displays the contents of a single record with 
text info, photos and icons for video, chat rooms and 
SMS messaging. ActionScript was coded to control 


the up and down motion of the dynamic elements. 


changed in week five, when the client requested that 
each page open with a large photo, and that the usual 
sections from the book link to a new page with three 
records and a picture for each. Nevil chose to use 
transparent PNG image cut-outs for these sections so 
they look like they are sitting on top of the page. To 
keep file sizes down, the 150 sections were set to load 
dynamically into a single Flash template using XML. 
The developers at Guinness wrote the XML code to 
link the site to their existing database. To avoid 
massive file sizes, the main section spreads and the 


record homepages were put into separate Flash files. 
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Week six 


In week six, Nevil experimented with some effects for 
the book section homepages, but the client decided it 


was best to keep things simple. 
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The client came up with a new feature to add to the 
main section screens — a ‘Did you know?’ fact box. 
This was developed using XML by the Guinness 
programming team. Like other features on the site, the 
display window for it included Flash shadows and 
bevelling techniques (which you can master on page 
36). The client wanted the site to be easily updateable 
by their in-house team, so the mission was to make as 
much as possible work through XML, including 


content, labels, menus and navigation buttons. 


Week seven 


It was time to sit back and look at the site. Nevil 
reviewed some of the design elements introduced 
weeks ago, and decided to revamp them - 
particularly the homepage template for each record. 
He also layed out the Search facility. The client 
wanted an advanced search engine to ensure good 
search results. The client also introduced a list of 
keywords associated with the Guinness World 
Records brand: biggest, longest, smallest, and so on. 
The Guinness developers wrote XML code to link 
their database of records to the search engine so 
results could be pulled into Flash directly. A panel 
was designed to slide over the navigation ticker to 
provide space for the search engine screen. The 
search engine, with its graphics and XML, was added 


as a separate Flash file to keep file sizes down. 


GUINNESS & 
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With all its elements, the main Flash file was now 80K. 
Though this was small, it was necessary to have a 
small pre-load of around 10 seconds to ensure the 
site loaded smoothly. The client requested that a quick 
fact from the records be displayed instantly while the 
pre-load took place. When the user had read the fact 


they could click ‘Continue’ to browse the site proper. 


Week eight 


In week eight, a final colour had been settled upon. 
The client requested that a poll question feature be 
added to the site. Nevil designed a window in line with 
the other graphics designed for the site. Again working 
with the programmers at Guinness, he created a Flash 
form that enabled users to vote by clicking a radio 
button. The vote was submitted to a database and the 
total results read back into Flash and converted into 
percentages. A bar chart system was added to make 
this more visual. Once again the up-down inertia 
ActionScript was used to animate the bars in the 
chart. “The poll and its functionality were quite an 
achievement for us and the client because this kind of 


thing has rarely been done in Flash,” says Nevil. 
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“Flash unfortunately has difficulty handling lots of 
things on screen, even if they're not moving,” says 
Nevil. “The more there is in the scene, the more things 
slow down.” Indeed, at this stage the site was taking a 
performance hit so the scrolling ticker, which 
displayed the most popular records and links to them, 
was rationalised to update every 10 seconds rather 
than to move across the screen. All the pictures in the 
Guinness library needed to be loaded in dynamically. 
They were converted to Flash files, but Guinness 
wanted to avoid using Generator and so XML was 
used again. A batch conversion speeded up that part 
of the process. The interface was tweaked with the 


addition of rollover annotations for site elements. 


Week nine 


fe Juggling Rotations 


Another feature required was the Book Access Code, 
enabling people who have bought the Guinness Book 
of Records to enter codes from the book to call up 
specific records online. The entry box for this code 
was designed to slide in and out. In week nine, much 
time was spent optimising file sizes, removing any 
superfluous code and refining the graphics. This was 
left to the end because the project was changing too 
frequently in the earlier stages. Space previously 
allocated for advertising in the top right corner was 
changed by the client to host Guinness World Records 
animations. To further optimise the file size, the ticker 
and other interface elements were moved to external 
Flash files. The main Flash file was still 80K, not 


including pictures which were loaded separately. 


the video launches in Flash rather than using HTML, 
so that a similarly-styled Flash template could 

be created for the video window. He felt this would 
ensure its look and feel integrated better with the site. 
Working with the developers at Guinness World 
Records, they created a system whereby the buttons 
in the video window loaded the correct video forthe 
relevant record. This idea wasn't used in the end - 


videos appear in Real or Windows Media formats. 


Nevil suggested to the clients that they try and keep 


Week ten The finish? 


World records online 


‘Your USEAN 
choose a usemname and enter it in 
|| the box provided. 

‘YOUR EPR AOORESS 

if you don't have an email address, 
get one trom wmew.hotmail.com 


So, the site's up and running, and 


you can visit it at [W] www.guinness 


worldrecords.com. Altogether, it 


delivers over 35,000 records from an 
XML database, through Flash and to 
the eyeballs of the world. 


“Getting the right design, which 


enhanced the book experience and 


was flexible from an editorial and 


design perspective was the main 


Finally it’s week ten, and time to implement a user challenge,” comments Simon 


registration system for the site. Users who register Rasalingham, director of Web 


are cookied by the site to see if they are registered technology at Guinness World 


and allowed in. Users who aren't registed are hit Records. “The design had to be 


with the registration screen. Nevil designed modular and ahead of the competition. 


the registration form, again using pop-up annotations This involved many iterations of the 


forthe help button to guide users through the design until we found the right 


form. Yet another Flash project. structural design to build upon.” In this 


case, ‘we’ includes members of the 


GUINNESS Guinness programming team, Harry 


WORLD RECORDS 


John and Joe Lynham. 


“The project went well and we are 


very happy with the outcome. The site 


was produced by an internal team, with 


little dependency on third parties. 


Theory7 was the only external party. 


Page impressions have increased as 


well as time on the site. 


With everything in place all that remained to do was “What would we do next time? 


convert the remaining 150 pictures for the main 


Avery difficult question. | am happy 


section screens into Flash and give the site a final with the outcome and we have an 


optimisation check, bug check and graphics check. 


excellent foundation to help move the 


The animations were tweaked to be pixel perfect and site forward”. 


smooth. And... the project was complete, apart from 
Nevil Slade's final caveat: “Well, finished for now. A 


For Nevil Slade, the site continues 


to evolve, with Theory7’s involvement 


site like this should never really be finished. It should on the design side. “The way | see the 


be as dynamic in its evolution as it is in its structure.” Guinness site is that it’s not finished 


yet and it probably won't be for a long 


time. If it was to be finished that would 


be unfortunate because it’s got a lot of 
potential,” he concludes. EEE 


GUINNESS 


In total, the site delivers over 35,000 
records. “Getting the right design 
from an editorial and design 
perspective was the main challenge,” 
says Simon Rasalingham. 
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Advanced Flash effects 


Professional design is all about refinement — adding 
those small details that make the difference between 
a Flash site and an award-winning Flash site 


s atool for the Web, we all 
know the power of Flash, but 
many of us also know and 
accept its limitations. Some 
of these limitations, however, can be 
overcome with a little know-how. 
Firstly, we'll learn how to create some 
Photoshop-style effects in Flash, 
bevelling and shadowing, avoiding the 
need to import large, inflexible, 
Photoshop images. Then we take you 
through the methods of achieving crisp 


fonts in Flash, moving your designs 
away from the commonly-seen Flash 
sites with blurry fonts. 

To complement your latest 
refinements, we show you how to add 
body and life to your animations by 
refining a simple animation of a box 
zooming into the screen to create 
something with body and life. With these 
tourniquets, you can change your 
existing site's entire look without any 
need for a major redesign. 


Part 1: Bevelling and shadows in Flash 


This tutorial walks you through the steps needed to achieve realistic-looking inner and outer 
bevels and shadows using only Flash... 


ay Start a new Flash file and select Modify>Movie 
and set the Background Colour to Blue 
(#3399CC). This enables you to see the line colours 
clearly. Create a new layer called ‘graphic’ and draw 
a black box outline (no fill) in the centre of the 
screen 300x200 pixels in size (use the Info panel to 
accurately set the size). Make sure that the line 
stroke is set to ‘solid 1 point’. 


4 | Create a new layer for editing purposes, then 
select both box outlines and goto Edit>Copy, 
then Edit>Paste In Place in the new layer. Set the 
width of the new box to 280 and height to 180 (we 
will call this box 2), then move it so that it is central 
to the box on the graphic layer. Now select box 2, 
then cut and paste in place the graphic layer. 
Remove the empty layer. 


x? Ensure that you are in 100 per cent view in 
Flash and follow this bit carefully. Select the 
box and go to Edit>Copy, then Edit>Paste In Place. 
Press the up arrow once and left arrow once to 
move the box 1 point to the left and 1 point up. 
Then using the Info panel, increase the width and 
height of the new box by 2 points. You should now 
have two boxes exactly 1 pixel apart. 


To create an inner bevel on box 2, colour the 

four inner lines black, then select the outer top 
and right lines and colour them grey (#333333). 
Now select the outer left and bottom lines and 
colour them grey (#CCCCCC). To see the effect 
more clearly, select the Theory7 colour orange 
(#FF6600) and using the Paint tool, fill the gap 
between the two boxes. 


Select the graphic in the shadow layer and 
goto Modify>Shape>Soften Fill Edges. In the 
pop-up box, enter 6 pixels for the Distance and 6 
pixels for the Number Of Steps - this gives a nice 
smooth and deep shadow. For more subtle 
shadows, enter smaller numbers. Unhide the 
graphic layer. We're not finished yet though! 


G You will notice that the shadow is projected 
evenly around the graphic. We need to 
change it to match the direction of the fake light. 
Select the shadow layer: this selects all of the 
shadow graphics (be careful — there are actually 11 
separate shapes now). Press the arrow key down 1 
point and left one point. 


3 | Select the top and right lines of the inner box 
and set their line colour to Grey(#CCCCCC), 
then select the left and bottom lines of the inner box 
and set their line colour to Grey(#333333). Leave 
the outer box coloured black. Your box should start 
looking like an outer bevel now. 


6 | With the inner and outer bevels complete, we 
are now going to add a shadow to our graphic. 
Create a new layer below the graphic layer and 
name it shadow. Using the Pointer tool, select the 
orange filled area and go to Edit>Copy, then 
Edit>Paste In Place in the new shadow layer. Select 
the new shape and colour it black. For editing 
purposes, hide and lock the graphic layer. 


Your stage should now contain a bevelled 
graphic, with an inner bevel for the window 
and a shadow, all in Flash. In this example, 
we've added a more complex version. To see 
if you've done it right, have a look at the 
Bevelling&Shadows.fla file on the CD. > 
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Part 2: Creating crisp text in Flash 


We show you a couple of ways of creating crisp text in Flash: it can be quite tricky, but is worth it. 
Here, we have used a slightly modified version of the previous tutorial graphic... 


System fonts 


System fonts have their 
advantages and disadvantages, 
so you should consider whether 
or not they are appropriate for 
you. System fonts enable you to 
have crisp text in Flash without 
the need to embed a large font 
file: this keeps your overall file 
size to a minimum. However, you 
cannot put text fields set to use a 
system font within a mask layer 
and you only have a choice of 
three fonts, _sans,_serif and 
_typewriter. 


Bitmap fonts 


Bitmap fonts are fonts designed 
to look crisp in Flash. They look 
great but you are limited to using 
certain font sizes and styles. It is 
important to note that some 
bitmap fonts require the text to 
be lowercase. They are quite 
difficult to use, but if you follow 
this tutorial carefully you 
shouldn't have a problem. 


a There are two ways of creating sharp text in 
Flash, the first is fairly simple, though it does 
have its limitations. Create a text field and set the 
font to either _sans, _serif or typewriter. Displaying 
text using these fonts can be unpredictable so to 
make things easier to adjust, go to Text Options in 
Flash, set the Text Type to Dynamic Text, Multiline, 
then check the Word Wrap box. Type in some 
dummy text. 
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4 | The next important thing to note with 

bitmap fonts is that the text field must be 
placed on a whole pixel, for example 14.0 or 15.0. 
Use the Info panel in Flash to determine its x and y 
position and set its position accordingly. If your text 
field is inside a movie clip, then the movie also needs 
to be positioned on a whole pixel. If there is more 
than one movie clip in the hierarchy then do the 
same for each. 
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Now we are going to make the fonts stand out 

from the page by giving them a shadow. For 
our example, put one text field on the stage and set 
the font to Hooge. 
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Creating crisp text using bitmap fonts is a 

little more tricky, but worth it. Before you start, 
you are going to need to install some bitmap fonts,. 
Download some of the best ones from 
[Ww] www. miniml.com or check out the font links on 
[w] www.theory7.com. Once downloaded, copy 
these to your Windows>Fonts folder. 


These fonts can be a bit difficult to use so if 

you have problems getting the text to display 
clearly, try adding to the position, for example, 14.5 
or 14.7. Next we need to ensure that the user can 
view the text in the font that you have chosen: go 
to Text Options>Dynamic Text>Multiline, check the 
Word-wrap box and click the left-most Embed fonts 
button. Alternatively, you can break the text apart, 
go to Modify>Break Apart (use this method if only a 
few words in your site use this font). 
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8 | Select text field and goto Insert>Convert 

to Symbol, check the Movie Clip radio 
button and click OK. Go into this movie clip by 
right-clicking on it and clicking Edit In Place. Select 
the text field on this layer and again convert toa 
movie clip using the previous steps. Select the 
second new movie clip and goto Edit>Copy. Create 
a new layer below this one and goto Edit>Paste in 
Place on the new layer. 
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a To make things easier, goto View>Antialias 
text. This displays text on the stage as it would 
be when exported, so you can easily check to see if 
your text fields are positioned correctly. Create a 
text field and select the font Hooge (this font looks 
better all uppercase). This is one of the fonts from 
[w] www.miniml.com. Set the text colour to white. 
Set the font size to 8 points, or any multiple of 8 
(16, 32, 64 and so on). 
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G Let's set up some more bitmap fonts. Select the 
text field that you have been using to test the 
bitmap font and make a few copies of it below. 
Change the font of the new text fields to any of the 
bitmap fonts previously installed. Some bitmap fonts 
require the text to be lowercase. 


Select the movie clip on the layer below and 

press down once and left once on the 
keyboard. With the movie clip still selected, go to 
the Effect panel and select Tint. Leave the default 
colour black, and in the Effect dropdown box, select 
Advanced and set the Alpha to 50 per cent. 


Part 3: Giving your animations body and life 


A few extra effects can make simple animations really special. We give a 
simple box animation life and body using a few simple tricks... 


Keyframe selection 


We are doing some complex 


keyframe selection using Flash 5, 


so it helps to have Flash 4 
Selection Style and Frame 
Drawing turned on. To do this, go 
to Edit>Preferences and check 
the boxes Flash 4 Selection Style 
and Flash 4 Frame Drawing. 


Insert a keyframe at frame 20, select the 


keyframes and the frames between and go to 
to the Frame panel. Select the Tweening dropdown 
box and select Motion. You can right-click and press 
Create Motion tween but we are going to be using 
the Frame panel for more complex animations. 
Select the first keyframe and goto the Effect panel, 
set Alpha to O per cent. 


For our example, make a copy of the bevel 
shadow window graphic created in our first 
tutorial, start a new file and paste it on the stage at 
keyframe 15. For the animation, we want a nice 
smooth frame rate. Go to Modify>Movie and enter 
24 in the fps box. 
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Select frame 1 of the animation layer, go to the 
Frame panel and set Easing to 100 Out. Select 
the keyframe in frame 12 and set the Easing to -100 
In. Go to frame 1 again but make sure that the box 
outline is deselected, hold the mouse cursor over the 
top line of the box outline. A curve will appear 
below the cursor. Click and drag downwards about 
5mm, and the line should bend. 


Insert extra keyframes in the animation layer 
at frames 12, 15 and 20. Select all frames in 
the layer, go to the Frame panel, click the Tweening 
dropdown box and select Shape. This creates a 
shape tweened animation. Select the first keyframe, 
go to Modify>Transform>Scale and Rotate and 
enter 25 per cent in the Scale box. 
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Select all of the frames in the animation layer, 
goto Edit>Copy Frames. Insert a new layer 
called animation2 and goto Edit>Paste Frames. 
Select frame 20 in animation2, lock the other three 
layers, select Edit Multiple Frames>Modify Onion 
Markers>Onion All. 


Goto Edit>Select All. Then go to 

Modify> Transform>Scale and adjust the 
handles so that the straight box outlines line up with 
the inner window (see screengrab). Turn off Edit 
Multiple Frames. 


3 | Insert a new layer called actions and insert a 
keyframe in frame 20, right-click on the 
keyframe and select actions. Insert a stop action 
from the list on the left. Insert another layer called 
animation. In frame 1 draw a black box outline (no 
fill) 300x200 pixels in size (use the Info panel to 
accurately set the size). Position the outline directly 
over the original graphic. 


Now do the same to curve the bottom, left and 

right lines of the box outline. Go to frame 12, 
make sure the box is deselected and curve each line 
of the box outwards by about 10mm. Select 
keyframe 1 and using the Mixer panel, set the Alpha 
of the line colour to O per cent. Do the same in 
frame 20. 


9 | Select frame 1 of the animation2 layer and 
goto Modify>Transform>Scale and Rotate and 
enter 25 per cent in the Scale box, then move the 
shape up 25 pixels (use the Info panel). Finally, to 
perfect the animation, click and release on the first 
frame of the animation2 layer. A hand should 
appear, then click again and drag the keyframe to 
frame 4 on the timeline. That's it, just go ahead and 
test the animation. EE 
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Make your sites work 
in any browser 


Forget about bells and whistles - Web users want content, 
and if they can’t see it then your pages have failed. We 
look at how to make your site run on any machine... 


im Berners-Lee, the ‘inventor’ of the World | touse graphics, facilities for displaying tabulated data 
( Wide Web, envisaged a cross platform | and very little else. This concise set of features would 
: environment where users would be ableto | enable any useronany machine running any OS to 
i share information online. One of the key | interact with the same information. That was in 1992. 
ways he intended to do this was by making the In1994, Netscape Navigator arrived with a set of 
language used to create Web pages elegantly simple. browser-specific extensions to HTML. This was the 
There would be functional text formatting, the ability first step in a trend that would divide the Web. 


iCab - das Internet-Taxi fur den Mac 
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Back Forward Home 
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Find Reload Source Prin Howist sis Larger Smaller 


URL: i hietp://wwew.icab.de) 


Smacnews — () Nogfradelt! 


(QWeb-Archive © SelfHTML 


QHTML 4.01 
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iCab Homepage. Worldwide your guide. 


SCab is a new web browser for the Macintosh. 


Isbin rin noch ge atone nig ts a 


‘ersten Version Aber 
tucnswase 
Previews 


Monaten weitere 
werden wir "iCab Pio" fir 49 DM. 


Mac OS X blends a UNIX cloned file system with Apple’s GUI expertise. Internet Explorer has 
been ported to the system from the OS 9 version, as has the Opera lookalike iCab. 


Web Standards 


In theory, the best way to ensure that your 
Web pages display legibly on any 
browser is to stick to the World Wide 
Web Consortium (W3C) standards for 
HTML. A committee set up in 1994 by the 
people responsible for inventing the 
Web, the WSC was created to “lead the 
Web to its full potential, by developing 
common protocols that promote its 
evolution and ensure its interoperability”. 
The consortium has a wide range of 
goals, the main one being to produce 
Recommendations — documents that set 
out the formal specifications of Web 
mark-up languages and scripts. 


Unfortunately, because no one owns 
the Web, no organisation can enforce 
technical standards. At the height of 
the browser wars, when Netscape 

and Microsoft were packing their 
technologies with a range of fancy yet 
unsanctioned features, the W3C was 
powerless to prevent it. Still, it was the 
WSC that formalised the specifications 
for HTML, and to stray too far from 
those specifications would have been 
commercial suicide. The upshot was 
that all browsers had the same base 
functionality embodied by the HTML 
standard of the time. In order to make 
your pages work on any platform, you 
had to stick to those standards. 


or any other configuration 


browser version 


together a text based alternative 


* Using obscure plug-ins for trivial reasons 


of Internet Explorer 


* Using Netscape's Blink tag 
* Setting table widths too wide 


Rather than create pages that work on any machine, 
there are designers who insist on taking the lazy route. 
These are the worst offences... 


* Using plug-in or Java-based navigation bars without providing a text-based alternative | 
| 
i 


* Notices which say that, ‘This site is best viewed at 1280x1024 pixels, 24-bit colour’, 


* Similar notices which say: ‘Optimised for Internet Explorer 5.0’, or which name another 


* Leaving the no-frames section of a frameset blank. It only takes a minute to knock 


* Sites that specify minimum bandwidth limits 


* Sites that use ActiveX controls — these only work unassisted in the Windows version 


* Using Internet Explorer's Marquee tag to scroll text across the screen 


} 
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However, there are particular 
circumstances when that approach 
doesn't work. Both the main browsers 
have been notorious for their patchy 
support of Cascading Style Sheet 
specifications, adding in their own 

extra parameters and leaving out 
functionality suggested in W3C 
Recommendations. This is set to change 
as version 6 browsers gain popularity. 

Now that the browser wars appear 
to have been won by Microsoft, you'd 
think that the role of the W3C would have 
diminished still further. Ironically, the 
consortium is making something of a 
comeback. Last year's US Department of 
Justice ruling that Microsoft had used 
unfair tactics during the browser wars to 
gain a monopoly, has left the company 
wary of further accusations. 

Microsoft Internet Explorer 6, 
available as a beta release, is set to 
redress that balance by complying 
rigorously with W3C standards. At 
the same time, the already released 
Netscape 6.1 is the company’s most 
standards-compliant browser ever. 
Following Document Object Model 
standards laid out by the WSC, the 
browser has even jettisoned some of 
the proprietary HTML tags supported 
in previous versions. 

This standards compliancy now 
embraces the full CSS1 specifications 
for Cascading Style Sheets. The 
encroaching switch over to Web 
languages underpinned by XML, the 
mark-up language for creating mark-up 
languages, is another factor in the 
browser companies’ sudden desire to 
play ball with each other. With XML 
the development of proprietary tags 
becomes redundant, because the 
protocol can be used to create new 
functionality on the fly. In this case, 
it’s in the interest of the browser > 


Minority browsers like Netcaptor aren't much of a worry, as long as you stick to standards. They 
come in two flavours — applications like Netcaptor that are actually built around the Internet 
Explorer engine, and standalone programs like Amaya and iCab that are very standards compliant. 
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developers to stay compliant with 
standards. Add this to the fact that 
‘standard’ Web languages, including 
XHTML, HTML 4.0, JavaScript, CSS 
and XSL, have as much functionality as 
the commercial versions, and there’s no 
longer a valid excuse not to stick to 
WSC recommendations. 

A good way to test whether your 
pages are standards-compliant before 
unleashing them on the world is to go 
to [w] http://validator.w3.org/. Your 
site will be given a thorough shake- 
down, and any errors will be pointed 
out. Unfortunately, the commercial 
Web is proving slow to catch on to the 
standardisation sea-change. An 
unhealthy percentage of commercial 
Websites are still optimised for the 
Windows versions of Internet Explorer 4 
or 5, but don't let that stop you from 
becoming more standards-compliant 
in your own work. 


Platform games 


Web pages display differently 
depending on platform and surfing 
configurations as well. While this used 
to mean catering for Windows, Mac OS 
and UNIX-like boxes for the most part, 
WebTV, WAP and PDAs are coming up 
fast. There's no point in trying to create 
pages that work on WAP phones as well 
as the Web — the protocols are different. 

There are some more specific 
platform issues that come up again and 
again. When processing images ona 
Mac, it’s definitely worth remembering 
that Windows default gamma settings 
are a lot darker, which means that 
images created on Macs can look 
washed out on PCs. 


<taglines/> XML- 
Deviant 


In the second article in our series on ROF and Prolog, we compare the use of Protog 
and XSLT to render RDF into HTML. 


The RDF Calendar Task Force 
Dodds describes the goals and methodology of the RDF Calendar Task Force, a 
practical Semantic Web development effort. XML com} 


XHTML is the latest version of HTML, rendered using XML. Fully XML-compliant browsers should 
be able to take advantage of changes to the language immediately, because the rules for using the 
language — the Document Type Definition — are stored on the Web rather than embedded in the 
browser. Go to [w] www.xml.com for more information. 
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NEW YORK, August 19, 1990- Anders 
Carison, Chairman of the Board and 
President of MPtree (Nasdaq: SCAL), today, 


announced that comparable store sales Me Board and President of 
Increases of 27% for the second quarter *a8daq: SCAL), today 
i eaConpene comparable store sales 


increase in operating earnings for 
three months ended July 31, 1999. 


‘as compared 


NEW YORK, August 19, 1999 - 
‘Anders Carson, Chairman of 


announced that 
increases of 27% 


the 


Wr $0.20 per share, an increase of 20%. 


contracts with 
plus a 17% growth of new: 


Aitines, 
franchises, 
Today, SCAAL has a total of 670 stores on 5 
fai continents, 


Microsoft's specially developed Web font Verdana is installed on Mac and PC operating systems 
along with the browser. Times New Roman is one of the few fonts that appears on every system. 


The best fix for growing and 
shrinking text is to make pages 
that have a flexible design... 


As muchas it might pain you, the best 
fix for Mac users may be to set your 
display to approximate PC gamma. 
Less destructively, Fireworks 4 or 
Photoshop 6 have features that enable 
you to emulate the other platforms’ 
gamma settings, so you can come up 
with a happy medium. Ona Mac with 
ColourSync installed, Internet Explorer 
automatically adjusts JPEGs with 
embedded ICC (International Colour 
Consortium) profiles, or will apply the 
default profile for the system. 

Mac users may also be familiar with 
the dreaded tiny type effect, where 
standard text in pages is too small to 
read. It isn't a bug as such, but there is 
a difference between the way PCs and 
Macs render type. 12-point type ona 
PC is 16 pixels tall, but on a Mac it’s 12 
pixels tall. Although the problem has 
been compensated for within Internet 
Explorer 5 and Navigator 6, it can still 
be an issue on version 4 browsers. 

The problem manifests itself in 
a different way when the page is 
developed ona Mac and displayed on 
a PC, with areas of text growing out of 
their boundaries — a real problem when 
used with fixed size layers ortable 
cells. Solutions include making sure 
you include some breathing space to 
accommodate stretching text, and 
using style sheet definitions to set font 
sizes in pixels rather than points. 


Choosing typefaces is tricky, too. 
Although Netscape and Explorer have 
built-in methods for downloading 
faces, neither has caught on. Times 
New Roman is guaranteed to be on 
any platform, but when specifying sans 
serif fonts, make sure you list both Arial 
(for PCs) and Helvetica (for Macs). 
Newer browsers will also recognise 
sans serif as a font class. 

Linux, Free-BSD and other UNIX 
clones have few display issues, but 
there's no Internet Explorer for those 
operating systems, so pages optimised 
for IE can easily break on them. 


Resolution defendant 


True standards-sticklers would tell 
you that the best fix for growing and 
shrinking text is to make pages that 
have a flexible design, using the 
<small> tag for small text. The fact that 
this is the way HTML was intended to 
be used doesn't deter many 
commercial sites from using fixed 
rather than fluid designs. 

The most fluid designs use 
percentages in tables, dividers and 
graphics so that they resize 
automatically along with the browser 
window. Images are unanchored, 
floating into place around text, and 
relative text sizes are used rather 
than absolute font parameters. As a 


consequence, they can pass muster on 
any browser at any resolution, but look 
pretty basic. 

As the Web has developed, designers 
have made pages increasingly complex, 
creating layouts that look more like 
program interfaces than the simple 
documents that HTML was originally 
developed for. Doing this stops the 
pages from being flexible, so you have 
to compromise to reach your audience. 

The standard way to overcome this 
is to design your pages fora fairly low 
resolution. Current statistics suggest 
that the majority of browsers see the 
Web at 800x600 pixels, though there's 
a significant and increasing percentage 
accessing the Web at lower resolutions 
as WebTV and PDA base browsing 
become more popular. 

Whether you design exclusively for 
computer-based Web users or decide 
to cater forthe TV and mobile market 
depends on content and your audience. 
For example, a site that gives local 
public transport information is useful 
for PDA users, and should be designed 
with them in mind. Keep image 
bandwidth down to a minimum and 
use basic HTML with no interactive 
scripting. When building a site that 
you know wilLattract WebTV users, 
remember that they could be browsing 
at resolutions as low as 544x372 
pixels. You may also want to take it 
easy on the plug-in content and hold 
back on the DHTML. 

If you expect your audience to 
be accessing your pages more 
conventionally, you can use tables to 
create pages that fit within a fixed width 
of around 800 pixels, remembering to 
take it down to about 750 pixels to 
compensate for margins. In all three 
scenarios, the pages should scale up 
to more highly specified configurations 
with few problems. The PDA optimised 
page may look a little basic scaled up 


to 1280x1024, but those are the breaks 
if you want your pages to be seen by as 
wide an audience as possible. 


Media madness 


The plug-in format that enables users 
to view media content within their 
browsers has proven to be something 
of a double-edged sword. At one time, 
there seemed to be different plug-ins 
for every media format going, however 
insignificant. That’s now settled down to 
the stage where it’s safe to assume that 
certain media types can be included in 
your pages without compromising 
cross-browser compatibility. 

Those media files supported by the 
Shockwave Flash plug-in, QuickTime, 
RealPlayer and Windows Media Player 
are the safest bets. That means MP3 
files, Flash, MIDI, QuickTime Movies, 
QuickTime Audio, Windows Streaming 
Media, RealAudio, RealVideo, WAV and 
AIFF are all allowed. 

Always make sure you prominently 
display a download link for the relevant 
plug-in when you include media 
objects in your pages, whether you 
stick to the list above or not. On some 
platforms like WebTV, you're confined 
to a narrower range of media types. 
There's no Java engine available either, 
so that isn't an alternative. Macromedia 
is working with Internet appliance 
manufacturers to enable Flash support 
in such devices, and MP3 playback is 
becoming standard for mobile devices 
— driven by a perceived demand that 
may not even exist. 

The final piece of advice, is that 
browser differences are fast becoming 
the least of your worries. If you want 
to cater to all markets, the mantra is 
definitely ‘keep it basic’. EEE 


W530 Woshbeteiniesy 


Leading the Web to its Full Potential... 


Activities | Technical Reports | Site Index | About W3C | Contact 


On this page, you'll find W3C news as well as links to information about W3C technologies and getting volved in W3C. We! 


encourage you to lear more about W3C. 


>» W3C/MIT Power Restored 


8 August 2001: Due to a power outage in the MIT LCS W3C 
building on Tuesday and Wednesday, 7-8 August, parts of the W3C 
site were down. W3C apologizes for the inconvenience. Services 
were restored at 22:00Z on 8 August. (ews archive) 


The World Wide Web Consortium site at [w] www.w3.org hosts a huge archive of documents, 
manuals and recommendations. If you’re serious about making your sites work in any browser, 


put aside some time to give it a thorough search. 
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Microsoft Internet Explorer 5.5 
The world’s most popular Web browser, 
accounting for about 80 per cent of all 
traffic on the Web. Available in Windows 
and Mac flavours only. 

For: Stable. Widely used. 

Against: Catering solely forthe Windows 
version could alienate up to 25 per cent 
of users. 

URL: [Ww] www.microsoft.com/ 
windows/ie/ 


Netscape 6.1 

The world's favourite underdog. Sunk by 
aggressive tactics during the browser 
wars, Netscape 6.1 is a grand return 

to form. 

For: Standards-compliant. Based on open 
source code. 

Against: Complaints of bugs in the 

early releases. 

URL: [w] http://browsers.netscape.com 


Opera 5 

Available on even more platforms than 
Netscape, Opera is small and very 
standards-compliant. Claims to be 
the fastest browser in the world. If 
only everyone would use it instead of 
Internet Explorer. 

For: Good test-bed browser for W3C 
compliancy. Fast. Reads WAP pages. 
Against: Default package ships 
without Java. 


URL: [w] www.opera.com 


Icab 
Mac-only Web browser that's similar 
to Opera. Although it’s still in beta, it’s 
more stable than its close rival. Version 
available for OS X. 

For: Offers good standards support. 
Small footprint. 

Against: For the Mac only. 

URL: [w] www.icab.de 


NetCaptor 
Not a browser as such — more of an 
extension device that lets Internet 
Explorer display multiple tabbed windows. 
A Netscape version is in the works. 

For: Makes the most of Internet Explorer 
Against: For Windows only. 

URL: [w] www.netcaptor.com 


HotJava 

Freeware browser built in Java by Sun 
Microsystems. Highly standards- 
compliant, but development was frozen 
in1999. 

For: Runs on Java-enabled systems 
Against: Lags behind modern browsers in 
terms of features. 

URL: [w] http://java.sun.com/products/ 
hotjava/3.0/ 


Amaya 5.1 

The official browser/authoring tool of the 
WSC. The current release is, predictably, 
the most standards-compliant browser 
available. Use it to test your pages. 

For: Good for debugging pages that are 
not standards-compliant. 

Against: Ugly interface. 

URL: [w] www.w3c.org/amaya/ 

Ariadna 


Lynx 

Lynx is a graphic designers nightmare — 
a Web browser that strips out graphics 
and interactivity, only displaying text... 
Thankfully, not many people use it. 
Windows, UNIX and VMS versions 
are available. 

For: The fastest browsing experience 
you'll ever have. 

Against: Turns your carefully designed 
pages into text documents. 

URL: [w] http://lynx.browser.org 
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Customising pages 
with UltraDev 4 


Learn how to integrate hand-written ASP code into U/traDev 
to control the options seen by different users 


ne of the most 
elegant features of 
server-side scripting 
is the ability to 
customise what different users 
see, based on user login or 
perhaps choices made during 
previous visits. This article uses 
the example of a content 
management system to show how 
a single page can show or hide 
different areas depending on who 


logs in to use it and their access 
level. The aim is to show the 
integration of custom code with 
UltraDev, while at the same time 
showing useful features that you 
can add to your own projects. The 
project uses Active Server Pages 
as the server model, and assumes 
that you know the fundamentals of 
UltraDev, including setting up an 
application server. The method of 
doing this can vary depending on 


whether you use UltraDev on 

Mac or Windows, where the Web 
server is located, and whether you 
use DSN ora connection string to 
connect to the data source. This 
tutorial assumes that you are using 
Personal Web Server or its 
equivalent on a Windows PC. If 
you're not using this configuration, 
follow your usual steps to set up 
the application server and 
database connection. > 
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Part 1: Setting up a DSN 


Like Dreamweaver, UltraDev requires you to work in a site 
folder that contains all the pages and assets for your site 


Creating recordsets 


Itis easier to create recordsets in 
the simple dialog, but if you need 
to filter the recordset on two 
criteria, or to join two tables 
together in SQL, you must use 
the Advanced dialog. Always 

use the Test button to try out 
recordsets to ensure the code 

is correct and gives the results 
you expect. 


Database structure 


Most of the problems you're 
likely to encounter ina real 
project are likely to come from 
the data structure, not UltraDev. 
It's important to get the database 
structure right, including 
relationships between tables, 
otherwise you could find that you 
just can't make the system do 
what you need it to. 


Pu Like Dreamweaver, UltraDev requires you to 
work in a site folder that contains all the pages 
and assets for your site. Copy the folder called 
JustMapsStart from the tutorial files on the CD onto 
your hard disk, and rename it if you wish. 


a ee Ce see a 


4 | Launch UltraDev 4, and choose Site>New Site. 
Name the project justmaps, and browse to 
your copy of the Start folder for local root folder. 
Choose Application Server in the categories, and 
choose ASP 2.0 from the server model menu. 
Append ‘justmaps' to the path for URL Prefix. 


Open the Data Bindings palette then create a 

recordset using the plus menu. Define a 
recordset from the maps table — name it mapsRS, 
choose justmapsConn from the Connection menu 
and choose maps from the Table menu. Choose 
Test to check that it works, then OK twice to return 
to the page. 


2 We need to publish the folder with Personal 
Web Server or IIS. This can be installed from 
your Windows CD. Choose Advanced, then set 
up a virtual directory called just maps pointing at 
your copy of the JustMapsStart folder. This makes 
the folder available by pointing your browser at 
[w] http://localhost/justmaps 


To define a connection to the DSN in 

UltraDev, open any document and choose 
Modify>Connections. Choose New>Data Source 
Name (DSN), then name it justmapsConn and 
choose justmapsDSN from the DSN pop-up menu. 
Click Test to ensure that it’s working, then choose 
OK and Done. 


8 | Add dynamic placeholders to the main table, 
using the Data Bindings palette. You can 
either drag and drop field placeholders into the cells, 
or click in the cell and use the Insert button on the 
Data Bindings palette. Use mapName for the map 
title, map!D for map number and mapPrice for price. 


Create an ODBC data source name (DSN) 

pointing at the Access database. Open the 
ODBC control panel, choose System DSN, Add, 
then choose Microsoft Access Driver (*.mdb) 
and click Finish. Select the justmaps.mdb data file 
in the JustMapsStart folder, and name the DSN 
justmapsDSN. 


We're going to add a simple recordset to a 
G results list page. Open maps_list.asp. This page 
is partially complete, and needs the dynamic data 
elements added to it. 
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9 | Click anywhere in the table row, then click the 
<TR> tag in the tag selector at the foot of the 
document window. Go to the Server Behaviours 
palette, then choose Plus>Repeat region. Set it to 
10, and choose OK. Choose View>Live Data to see 
the rows appear. 


Problems inserting 
empty fields 


If you submit an insert or modify 
form with empty text fields, 
you'll usually get an error from 
Access saying it can't insert a 
zero-length string. Luckily, this is 
easy to fix in the Access 
database. In Design View in 
Access, for each text or memo 
field, set the option Allow Zero 
Length to Yes. 


Access levels 


When using access levels for 
controlling login privileges, use 
numbers rather than text forthe 
access level values (for example, 
use ‘1’ instead of ‘administrator’). 
This enables you to use greater 
than and less than operators to 
enable several groups to see a 
piece of content. 


To show the user how many records they're 
browsing, click in the cell below the page 

heading and choose Insert>Live Objects>Recordset 
Navigation Status. To enable the user to navigate 
through the records, click in the brown cell at the 
foot of the page and choose Insert>Live 
Objects>Recordset Navigation Bar. Save the page, 
then press F12 to preview in a browser. 
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chore chap 


Click in the login form, then go to the Server 
Behaviours panel and choose Plus>User 
Authentication>Log In User. Check that it’s getting 
information from the login form, using username 
and password as the fields. Use default.asp for both 
the pages, and set it to use clearancelD as the 
accessLevel field. 


Create a recordset called CategoriesRS 

containing the items from the Categories table. 
This will be used to populate the pop-up menu for 
searching for different regions. Choose the Selected 
radio button, then Control-click (Shift-Click on Mac) 
on category|D and categoryName to select them. 


Maps.com 


1 Andy Manow 
2E6 Torance 

3 Ted Murmps 
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o Now, we'll create a login feature. The database @ This page will eventually show either the login 

contains a users' table that contains username, form or the search form depending on whether 
password, clearance, and fullname fields. This will the user is logged in or not. Have a look at the login 
be queried using the U/traDev user authentication form: we simply have two text fields called 

features. Open the partially completed default.asp. username and password, and a submit button. 


<input type="text" name="password"> 
<input type="submit” value="1og in” newe="submit"> 
</form> 


<form neme="search” method="post” action=""> 


‘Youhave made changes to the code. 
To edt selection properties, cbck Pllvesh or press FB. 


G Scroll down the code to find the closing </TR> 
tag for the row (it's the next one you 
encounter) and enter <% End If %>. This code 
refers to an ASP session variable that's created by 
UltraDev during a successful login. If it doesn't 
contain anything when the page executes, the user 
isn't logged in and the login form will be displayed. 


14] Now, we'll hide the login form. Click in the row 
containing the login form, then click the <TR> 
tag in the tag selector. Open up the Split Code view 
and enter a new line just before the selected <TR> 
tag in the code. Enter: <% If 
Session(“MM_UserAuthorization") ="" Then %> 


Now we'll hide the search row until the user is 
logged in. Select the <TR> tag containing the 
search form, then in Split Code view, enter the 
following code before the <TR> tag. 
<% If Session(“ MM_UserAuthorization”) > 0 Then 
%> Enter the following after the </TR> tag for that 
row: <% End If %> > 


17 Select the pop-up menu on the page, and go 
to Server Behaviours. Choose Plus>Dynamic 
Elements>Dynamic List Menu, and specify: 
recordset — CategoriesRS; menu — CategorylD; get 
labels from — CategoryName; get values from — 
CategoryID. Leave the ‘select value equal to’ empty. 
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Part 2: Search forms 


We'll create another session variable when the user logs in, 
then create a logout link to test the different logins 


Getting help 


UltraDevis one of the hardest 
applications to use, and it's good 


to have people to turn to for help. 


Subscribe to the Macromedia 
UltraDev newsgroup where 
there's a wide and active 
community of helpful, 
knowledgeable people to ask for 
help when you're stuck. Make 
sure you read the FAQ that's 
posted occasionally, and try 
searching groups.google.com 
before posting to see if your 
question has been answered 
already, go to [w] news:// 
forums. macromedia.com/ 
macromedia.ultradev 
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We'll create another session variable when the 

user logs in. At the end of the line “ 
MM_rsUser.Source = “SELECT username, 
password”” add ,fullName Find the line in the code 


username and password match - this is a valid 
user” and add a line after it saying: 

Session(“ MM_Fullname”) = 
MM_rsUser(“fullname”) 


haps.com 


4 Press F12 to preview in a browser, and test the 
page using the three logins in the users table. 
Use the logout link to reset the page to try another 
login. The logins/passwords are; admin/admin, 
editor/editor, and user/user. 


Now we're going to join the maps and 
categories tables to customise the page based 

on the category chosen on the default page. Click 

Advanced, and amend the SQL code as shown. 


In Code view, add the words ‘Welcome back’ 

at the start of the text in the search row, and 
add the following code to write out session variable 
containing the user's full name: 
<%=Session(“fullName")%> 


In order to make the search form functional, 

we need to set the form action to point at the 
maps list page. Select the pop-up menu, then click 
the <FORM> tag in the tag selector. In the 
Properties, click the browse button for Action and 
choose maps _list.asp. Set the form method to GET. 


@ Click after the text ‘Map list’, add a space and 
a hyphen and then add a text placeholder for 
categoryNamefrom the Data Bindings palette. Save 
the page, then turn on Live Data view. You can 
simulate the sending of different values by entering 
category|D=2 (or 3 or 4) into the querystring text 
field in the tool bar and pressing Enter. 


ey To help us test the different logins, we'll create 
a logout link. Highlight the word ‘logout’, go 
to Server Behaviours, and choose Plus>User 
Authentication>Log Out User. Ensure that ‘when 
linked clicked’ is chosen, and specify default.asp as 
the redirect page. 


G We need to amend the maps list page so that it 
uses the category selected from the pop-up 
menu to filter the recordset of maps. Open 

maps _list.asp, double-click mapsRS in the Data 
Bindings palette, and set the filter options to: 
categoryID, =, URL Parameter, categoryID. 


9 | Now we'll set the bgcolor of the side cell based 
on the category colour. Click in the side cell, 
click the <TD> tag in the tag selector, then switch 
the Properties palette to Parameters view. Click the 
lightning bolt beside the BGCOLOR attribute, and 
choose categoryColour in the Categories recordset. 


Part 3: Access levels 


Finally, we'll use snippets of ASP to prevent regular users from 


editing or deleting entries from the list page 


Maintaining state 


Having searched ona region, we 
need to maintain that state when 
we go down into the modify page 
then return to the list page. It is 
best to code links by hand to do 
this instead of using the Go to 
Detail Page behaviour with Pass 
Existing Parameters, because 
this can cause problems when 
you return to the list page and try 
to use another edit link. 


To set the colour of the heading text 
& dynamically too, click in the heading and 
then click the <TD> tag in the tag selector. In 
the Code view, add a style attribute inside the <TD> 
tag as follows: 
style="color:<%=mapsRS(“categoryColour")%>" 


To send the correct mapID to the edit page, 

amend the link on the word edit as follows: 
maps_edit.asp?categoryID=<%=request(“ category 
ID")%>&mapID=<%=( 
mapsRS.Fields.Item(“mapID").Value)%> 


Back in default.asp, make a link to the user 

management module. Open default.asp and 
link the words ‘list users’ to the user_list.asp page. 
We need to hide that link unless the administrator is 
logged in. 


2) We want to prevent regular users (level 3) 
from editing or deleting entries from the list 
page. Click in the edit link, then in Code view, insert 
the code shown before and after the <A> tag. This 
hides the link when access level is greater than 2. 


[5 | Let's check that everything works so far. Open 
a browser, and type localhost/justmaps to 
bring up the login page. Log in, and search for maps 
from a region. 


Select the table row containing the list users 

link. In the Code view, add the If and End If 
statements shown above. These ensure that this 
table row only appears if the user's access level is 1. 


We want to restrict the delete function to 

administrators: click in the delete link and then 
in Code view insert the code shown before and after 
the <A> tag for the delete link. 


6 | Open the page maps_edit.asp, and choose the 
server behaviour User Authentication>Restrict 
Access to Page. Click define and enter 1, 2, and 3 as 
levels. Back in the Restrict Dialog, Control-click on 1 
and 2 to prevent level 3 users or other users 
accessing the page by entering its URL directly. In a 
real situation, you'd follow similar steps for all but 
the login page. 


authentication features of U/traDev 4 and 
some snippets of ASP to control access to the site, 
and to limit the options people see. FEES 


9 | That's pretty much it. We've used the user 
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hell's kitchen's irish mob, and their 20 year 
reign of terror, murder & mayhem. 


contact> 


METRO IMAGE GROUP 
S508 WEST 24TH STREET 
NEW YORK, NY 10011 


ATTN: TOM CASE 


tel> 212.242.7708 
fax> 212.989.8278 


www.the’ 


westies.com 
STC FILMS PRODUCTIC 


Writer's Guild of America East registration #R01519-00 


Ultra 16, proving that there is design life beyond Websites, showing off a print-based promotional image for a 90-minute documentary 
film, The Westies. “In the tradition of The Godfather, The Westies is a powerful tale spanning 60 years,” tells Matthew Chun. “A gang of 
Irish-Americans, the Westies, patrolled Manhattan's West Side throughout the 60s, 70s, and 80s. They ruled the tough blue-collar 
neighbourhood of Hell’s Kitchen, where bodies were known to literally fall from the sky.” Ron McCarty and Tenth Avenue Productions are 
teaming up with Ultra 16, among others, to create a feature length documentary film soon to air on cable television. Ultra 16 is responsible 
for the design of titles, credits, transitions, and trailers. 


Ultra 16 


This highly professional new media design outfit has Website design at its core, but a skill-set that 
goes way beyond. But how? Creative Director Matthew Chun reveals: “Good is the enemy of great...” 


ith a client list that reads like the Who's 
Who of the US entertainment and media 
business community — Sony, Viacom, 
Young & Rubicam, MTV — you might 
readily assume that Ultra 16 is perfectly able to make 
the pitch and deliver the goods full of smart ideas and 
slick delivery. You'd be absolutely right of course, but 
it’s refreshing to meet an outfit that is proud of its 
ability and accomplishments, yet is also ready to learn 
from others, develop to meet the needs of a job, and 
thrilled by each new achievement. 

Headquartered in New York City, Ultra 16 is a 
synthesis of diverse talents and backgrounds. The 
organisation, though still in its infancy, boasts such 
honours in design as the One Show Interactive Award 
2000 for its interactive work with American Express, 
and the Nielsen NetRatings #1 NFL team site in 2000 
for the design and build of one of the biggest American 
football teams, ClevelandBrowns.com. 


Being Sony 


President and Creative Director Matthew Chun 
explains a little more: “Ultra 16 comes from ‘Super16’ 
which is a film format used widely on independent 
films and gritty-styled music video and commercials. 
When | started Ultra 16 back in Sept 99, | wanted to 
direct live action and work on motion graphic projects. 
The funny thing was that from day one, | received calls 
asking for interactive capabilities. 

“Initial projects like Cleveland Browns, Amex (in 
conjunction with Raw Interactive), and Prada (in 
conjunction with R/GA) were too much of a good thing 
to pass up. And, since then, we've kept getting more 
and more interactive work. The combination of great 
projects with open clients has given me a true 
appreciation for this medium and we look to push its 
limits with every opportunity.” 

To date, Ultra 16 encompasses all of the disciplines 
of new media, including strategy consulting, Web 
integration and design, advanced interaction design, 


database and application development, broadcast and 
print design. This is an undeniably broad skill-set, and 
necessarily so, given the competitive field in which 
Ultra 16 plies its trade, and the fact that it offers 
flexible, one-stop solutions to exacting clients in the 
most demanding society in the world. Still, as the song 
goes, if you can make it there... 

“Our client's success is our success,” goes one 
company mantra. “Good is the enemy of great” says 
another. As company philosophies, official or 
unofficial, go, it’s difficult to fault. “Our standard is 
excellence,” continues Matthew. “We strive to 
ensure online success through outstanding and 
award-winning interactive visual design and strategy.” 

But as well as the clear discipline of client-serving, 
Ultra 16 is aware of the team’s own artistic urges, and 
has developed an atmosphere and working practice 
conducive to both: “Our aspiration is to remain true 
to our design sense and ourselves,” explains > 


“After staring at all our Sony components day in and day out, it’s awesome to think we have a hand in developing this electronic 
giant’s brand.” Matthew Chun cannot spread enough love for Sony’s people and products... 


The brief: The three challenges were a) to 
create an environment where employees 
can interact and learn the Sony brand, b) to 
provide access to brand standards for 
marketing, sales, and partner companies, 
and c) to enable constructive dialogue 


between Sony employees and management. 


The solution: Ultra 16's three steps to 
providing a solution: a) creating an 


environment where learning occurs through 
interaction, b) constructing a navigation 
scheme with multiple entry points into all 
information, and c) providing indispensable 
business tools. 


The process: “Bringing together an entirely 
Flash-developed Branding Site, in no 
uncertain terms, was an exciting challenge 
for us,” explains Ultra 16's Flash Developer, 


Chris D."The trick to presenting an 
enjoyable Flash experience while trying to 
include a plethora of information involved 
breaking down the components of the site 
into easy-to-animate sections. Using 
applications such as Photoshop and Swift 
3D in conjunction with Flash, we were able 
to present large amounts of copy and still 
keep the Flash-experimentation fresh. 
Photoshop was used for the majority of Blur 


and Pixelization effects, while Swift 3D 
provided for dimensional cubes on the 
Brand Building Blocks section and other 
various sections of the site. Most of the 
text effects were achieved by combining 
Swish animations with a multitude of 
Photoshop filters." 


The result: Sony's employee-only, 
ID-protected site launched April 2001. 
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Ultra 16’s Adam Pacelli, Managing Partner. “Remaining 
tight and exact ensures success with all of our clients. 
In order to take on the world’s largest agencies, you 
must be versatile, mobile and accommodating.” 

This, figures Ultra 16, will lead to its twin future 
aspirations: fulfilment and growth. Noble aspirations 
indeed, but what of Ultra 16’s here-and-now? Well, 
there are house rules: “Must be on time,” nods 
Matthew, counting on his fingers and rolling his eyes. 
“Everyone takes out the trash...” 

“Must smile while working,” interjects Adam 
(smiling). “Must work as a single unit while 
individualism is encouraged,” continues Matthew. It’s 
the last two that paint the picture. 

So the conversation goes. From the way they 
work, to likes and dislikes, to early design influences — 
“Bob Cato (former mentor), Hagai (design teacher 
at FIT), David Carson, Christa Skinner,” and on 
to broader motivating forces: Picasso, Federico 
Fellini, the Russian Constructivists, El Lissitzky, 

Josef Muller-Brockmann, Robert Rodriguez, then to 


Tools of the trade 
Ultra 16’s office hardware 


+ 20 workstations - PowerMacs and PCs 
ranging from 7OOMHz to 1.3GHz 

« Five full-time servers 

- Several digital video cameras 

-Two 16mm and one super 16mm camera 
*“Oh, and our pride and joy, Canon PC980” 
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the music that moves them: Mozart, the CowGirl video 
from Tomato, Kyle Cooper (imaginaryforces), 
SquarePushers, Underworld. 

“Music is the main source of inspiration,” confirms 
Matthew. “Sound gives birth to sight, sight gives birth 
to imagination, imagination gives birth to creativity... 
creativity gives birth to life.” 

And back, eventually, round to Websites. 

Adam cites the Gucci and Nike sites (see [w] www. 
gucci.com and [wW] www.nike.com for big-brand 
Flash-fests) as those that have inspired the Ultra 16 
designers recently. | 

Which Web design tools couldn't Ultra 16 live 
without? “Adobe and Macromedia,” says Matthew 
instantly. And what commercial design tool would the 
Mac-fan like to ban? “Any PC version of a design tool!” 

But the Photoshop devotee makes a comment 
about the latest version that we've heard once too 
often now, and feel duty-bound to pass on to Adobe: 
“As for Photoshop 6, why did they change the Color 
Dodge function on it from version 5.5?” 


We slip into another favourite game — fantasy software 
development. The rules are simple, just put cash, 
company loyalty and business practicalities aside 

and dream up your ultimate creative software: “I wish 
After Effects and Flash were combined into a single 
tool,” says Matthew. “I wish Corel Vector Effects was bit 
more developed. Oh, and Mac OS X!” 

But no single piece of software can fix the biggest 
frustration: inadequate bandwidth. “Been screaming at 
it since 1995. I’m dealing with it — with a lot of therapy,” 
says Matthew. “Other than unlimited bandwidth via 
wire and wireless, a real-time multi-location video 
conferencing tool would be great: one where each 
party can make notes and draw on screen.” 

We leave Ultra 16 putting the design world to 
rights. In the meantime, feast your eyes on these 
interactive laurels that Matthew, Adam and the rest 
refuse to sit back on. EE 


=) Home site, portfolio and links at [w] www.ultral6.com, Feature by 
Josse Bilson [e] JosseBilson@aol.com. 


Finally, the official, on-site David Bowie / Bowielet v.2 message boards have arrived. Post It all - don't hold beck and 
help contribute to the community Let your virtual voice be heard, . 


Oi tow 


share your thoughts 
© Bowie 


© cottectabies 


© music 


© Open Forum 


© Naggers Top 10 


‘The most recent topios concerning world events, politics, technology, news, the Internet, sports, travel 


All things David Bowie, Past, present, future. This is the place, 
Chat it up about your new and old Bowie stuff! 


Talk about the latest trends, sounds, new bands you want to turn others onto, concerts you have jort seen 
oF are going to, great articles, TV specials, and anything else that motivates the beut within. 


No boundaries here! Pick 2 tople, amy teple 


© Rants and Feedback 
‘This is where you can let your opinions run wild concerning Bowlwitet and UltraStar. Tell us whet we are 
doing right, wrong, and sideways. Help us improve the community and get others involved with your 
suppestions - o'tmen, we can take itt 


OK, we want to know your top nes (complaints) about Bewietlet and suggestions on how to improve the 
site. This te 2 community, so step right up and let's hear it! Our own little Speakers Cerner 


© Technical Support 
© Upcoming Shows 
‘The place to discuss the latest about David's next septar ances. thet formation , venues. and mere 


Just listen to > with Low Reed at his... siraffer ALL WHO ARE ATTENDING JUNE 19 SHOW LOG... char 
Re: Last week I saw the 12° version 0... moriloiron Arise Sir Devigttt besze 
Re: exetasivel TOTAL BLAM BLAM SINGS! parle Sailor 5 am s0 disappointed im you, mibedeacter 
[4 06024M | 07.12.2000 0 
Bexie 07-5544 | 07122000 0 
Lhave 2 question! femiatetet ‘S:zePrt | 07072000 0 
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1. The home site for American football team, The Cleveland Browns, was Ultra 16’s first 
big Website. Part of the brief was to build enhanced community tools, including 
message boards updated by players, multiple chats per week, and streaming media 
segments hosted by players and coaches. “Before getting involved, it was rated 27 out 
of 32 within the NFL. Afterwards it received a number one rating and generated 
millions of hits a month,” reveals a proud Matthew Chun. Ultra's secret weapon? “A lot 
of blood, sweat and tears...” 


2. In order to promote ‘Blue’ from American Express, increase membership and raise 
brand awareness, Ultra 16 teamed up with Raw Interactive to design and animate an 
interactive CD-ROM direct marketing campaign with a look and feel that supports the 
card's futuristic features. “We learned so much from working with Raw Interactive,” 
explains Matthew Chun. “This was our first major project and award: it gave birth to 
Ultra 16 as we know it today. For this we are eternally grateful.” 
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getmusic 


“It was a privilege and an honour,” announced Ultra 16’s Matthew Chun. “To be asked to help 
brand one of the world’s biggest and best communication agencies blew us all away.” 


The challenge: This incredible commission 
was to provide Young & Rubicam, Inc — one 
of the world's leading advertising, ID, 
promotion and marketing companies — with 
a fresh online image, and develop a 
marketing strategy to support Y&R's global 
integration. Wow. 


The solution: Ultra 16 composed a 
closed-loop marketing strategy where a 
potential client can seamlessly navigate 
between all Y&R companies. In order to do 
this, they designed and implemented a 
dynamically-driven Flash and HTML site. 


The result: Ultra 16 implemented the 
Global Locator, a database function which 
enables participants to match Service and 
Geographic Location with Partner 
Company. [w] www.yr.com successfully 
launched on April 14, 2001. 


3. Peeps, the hip-hop section of interactive 
music site, Get Music, is database-linked, 
dripping with Flash and was designed 

and created by Ultra 16. See it at 

[w] www.getmusic.com/peeps 
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Illustration: Scally [t] 07958 573446 


“HEADLINE // STANDFIRST J 


Create consistency using 
cascading style sheets 


How do you go about creating style consistency across your 
Website? We show you how by defining a style template using 
TopStyle 2 and Dreamweaver 4 


f you're looking to get 
into professional Web 
development, you'll soon 
learn that consistency is the 
key to good design. Clients may require 
a templated site that enables non-Web 
developers to create new pages or 
amend existing ones. This template site 
needs a defined structure so allthe 
pages keep the same structure and style. 
When you update your business 
image, fine details are put into place: the 


fonts used within business literature, and 
the size of headers and colours used 
throughout. This style template can be 
presented to a publishing house which 
prints corporate stationery. 

TopStyle enables you to define styles 
for individual elements on a Web page. 
For instance, if you want key headlines 
on each page to be a particular font, a 
certain size and a constant colour, you 
can do this by creating a class called 
-headline and selecting these conditions. 


The style sheet you create remains 
external and can be applied to every new 
page within your site. 

Within this tutorial, we use a 
combination of TopStyle 2.1(there’s a 
30-day trial on the cover CD) and 
Dreamweaver 4(also on the CD as a 
30-day trial) to define a template style 
sheet. You can then import this in to your 
Web design package and go on to use 
this template when creating additional 
pages for your site. 


Part 1: Defining your style template 


TopStyle ships with a number of pre-defined templates — start with a blank sheet 


Compatibility 
issues 


You can attach a style sheet to 
your Web pages as an external 
object, where it will be imported 
when required. However, for 
cross-platform compatibility, it is 
better to embed your style sheet 
within your Web pages, as 
external sheets can be ignored 
by Web browsers such as 
Netscape on the Mac. 
Dreamweaver will always embed 
a style sheet, as default. 


(Note You can change the active atyie detiriian at ary time by 
selecting from the drapaowm shove the style hepector 


@ Toi.me more anout site detinivons 


Before we start, we need to set the current 

active style definition. Select CSS Level 2 from 
the list. If you require a high degree of Web browser 
compatibility and/or your planned sheet only 
requires a basic level of functionality, select CSS 
Level 1 or a specific browser from the list. 


4 | Now you have selected your first style tag, you 
can choose the styles you want to attach to 
this tag. In the main window, place your cursor 
between the { } braces. Go to the Style Inspector 
located in the top-right window. Scroll down to the 
Font tree and the Font-family option. 


Now add styles for other tags. For instance, 

you could create a specific style for <h1> tags. 
If you wanted <h1> headers to be font size 24pt 
and bold in weight, this would enable a page 
designer used to working within HTML code to 
enter <h1>Header Here</h1>. 


Thats 
Youre ready to begin using TapSiyte. Just choose how: 
‘you'd tee to start, ten cick finish to continue. 


© Staten a blank site sheet 
(© Create a new stvie sheet 
© Open an misting sie sheet 


(PS you wart to change ary settings waite running TopStyie, 
Ast HR FS to show he Options catog ) 


FF Greys wew tee wetome screen at awh 


On starting TopStyle, you are presented with 
the option to create a new style sheet, import 
a HTML document (which may have a style sheet 
embedded within it) or start from an existing 
template. TopStyle ships with a number of 
pre-defined templates. Start with a blank sheet. 


You can select from a dropdown list of 

pre-defined and popular font families or click 
on the ‘Aa’ button, which launches the Font Picker 
window. From here you can select your own group 
of fonts, such as Helvetica, Arial, Sans-serif and 
preview your choices. 


o Next we need to create the style that is 
applied to <a href=> links within your Web 
pages. Go to the Selectors window and create a 
new selector. Within the Simple tab, select 
A:Hover. Make the link red and underlined. 

This defines how your link reacts when a user holds 
their mouse over it. 


We're going to create a body tag for the style 

sheet. Go to the Selectors window located on 
the left of the interface. From here, click on New 
selector and a window will appear. Within the 
Simple tab, select the body tag from the list and 
choose OK. 


G After defining your font family, you need to 
select a colour for your font. We're going to 
select black, because this font family is used 
predominantly through the site. Go to the Style 
Inspector and choose the Colour option. Select a 
colour from the dropdown menu or via the palette. 


2 t i 
9 | TopStyle enables you to create your own 
customised styles, useful for straps, headlines 
and other one-offs. Create a new selector and go to 
the Class tab. We're going to create a style for your 
main headings, so enter .headline within the class 
name box. > 
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Once you have defined the colours used 

within your style template, TopStyle's Palette 
Editor enables you to darken or lighten individual or 
grouped colours, quickly go to a colour defined 
within your style template and convert your colours 
to a Web browser-safe palette. 


TopStyle has an excellent preview facility. You 
can preview your style sheet as it is created. 
The preview is shown within the bottom window. 
Click on the Preview button and extend the window 
to show your entire sheet. The preview window 
uses your browser technology to create the results. 


evens Onn 
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Wher sere te caer cary 4 menmendnd © she dre 9 


Style check your style sheet for compatibility 

problems. Click on the green button with a 
yellow cog wheel and a list of options appears. Now 
click on the green button with the white arrow and 
TopStyle examines your sheet and displays the 
results within the bottom window. 


Part 2: Using your style template within Dreamweaver 4 


To implement your styles across your Web pages, start by importing your style sheet 


Advanced style 
sheets 


You can do a lot more than define 
fonts, sizes and a colour scheme 
within cascading style sheets. 
CSS Level 2 enables you to 
position items within your Web 
page, thus moving away from 
using the bloated method of 
tables and invisible images. A 
word of warning — if you want 
Web browser compatibility, CSS 
Level 2 won't work with older 
browsers such as Internet 
Explorer 4 or Netscape 4.7, 
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Go to the Site menu and select New site. 

A Site Definition window appears. Create 
aname for your new site and select the root 
folder (this is the folder on your hard drive where 
your site, along with your Web pages, will be 
created). Enter the http address (for example, 
[w] www. yourcompany.co.uk) and press OK. 


4 | After importing your style sheet, you will be 
able to view a list of your styles from within the 
CSS Styles window. As the style sheet has been 
imported in Dreamweaver (you can also choose to 
link to an external file), you can edit the style 
template from within the Styles window. 


Once your site has been created, we need to 

define a page template. This template 
contains the style sheet created in TopStyle. Firstly 
we need to add the style sheet to the existing 
(blank) page. Go to the CSS Styles window and 
click on the Attach style sheet button. 


Nt uit labore et dolore magna aliquam erat volupat. Ut enim ad 


‘minmmum yversami quis nostrud exercitation lam corpor sm dolor 
adipscing ekt sad dism nonumery eursmod 
tempor incidunt uit labore et dolore magna aliquam erat volupat. 


Now we are ready to add styles to a Web 


page. You can add styles while creating your 
Web page or add styles to existing text once you're 
happy with the page content. To add a style, select 


the text, go to the CSS Styles window and select a 


style. The style is applied to the selected text. 


3 Your style sheet is located outside the new site 
folder: Dreamweaver will ask you whether you 
want to move the sheet. Select Yes and the sheet 
will be copied to the root folder within your new 
site. Don't move the style sheet from this location. 


G Once you have started to add styles to the 
HTML, you can define a page within your Web 
browser by clicking the F12 key or selecting Preview 
in Browser from the File menu. You can define any 
browser within Dreamweaver and preview your 
styled Web pages for compatibility issues. EEE 


+ A FREE Cp 


FOR ALL WEB DESIGNERS 


Every month, Cre@teOnline showcases the finest sites 
on the Web and the people behind them. As well as 
acting as a forum for professionals to exchange ideas, 
we also explore how sites can be improved and the 
effect they have on their end users. If you want to 
stay ahead of the game, start here. 


THIS MONTH: THE TECHNOLOGY ISSUE 


This time last year everyone was talking about Broadband, 
3G, GPRS, WAP and Interactive TV. But what's happened to 
all those emerging technologies and where did all the great 
ideas go? We explore what happened and we look at the 
innovations that are now quietly taking these technologies 
forward. Top experts from each discipline reveal where we're 
up to, what needs to happen next and why you need to get 
involved in them now. 


PLUS: 

New expanded news section covering mobile, iDTV and more 
We roundup the best news sites to analyse what makes a hit 
The good, the bad and the ugly in MTV2's site 

The best B2B sites on the Internet today 

How Microsoft are bringing PC operating systems to phones 


All the latest and greatest jobs in our regular Recruitment 
and Training sections 
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Aree» Ye Beyond Flash 


here is no 
doubt that 
Flash is the 
ultimate tool 
p forthe creation of high 
impact, interactive 
animations and Websites 
on the Internet — or is it? 
Despite Flash’s ease of use, 
extensibility and brilliant 
scripting abilities, there is nowa 
massive catalogue of software which also 
exports to the infamous SWF format and a 
good deal export to the new Shockwave 3D 
format W3D too. 

Flash has the greatest level of scripting 
available for any program exporting the 
Flash variant of the SWF format, but often 
certain tasks, like applying a certain 
animation to different symbols ortext can 
be time consuming due to lack of macros. 
Many of these non-Flash Flash solutions 


This comprehensive listing of software 
which exports to the Flash version of 
the SWF format and the new W3D 
format, shows that there's more to 

Flash and its big brother Shockwave 

than you might think... 


can streamline your workload by applying 
complex effects which would take much 
longer to produce in the standard Flash 
product. Certain effects from many of the 
packages would also be nearly impossible 
to create in Flash without an Albert 
Einstein-esque medula oblongata. 

Equally, Flash is not the only 
comprehensive interactive animation 
tool, with the likes of LiveMotion, Insane 
and others enabling the full creation of 
interactive Flash, with actions, triggers 
and the like. 

There is certainly much more to Flash, 
and its big brother Shockwave than simply 
Flash and Director. This comprehensive 
listing of software which exports to the 
Flash version of the SWF format and the 
new W3D format, which can be 
incorporated into the full Shockwave format 
created by Director, should show, without a 
doubt, that there is life beyond Flash... > 
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Export to Flash SWF 


LiveMotion 


Adobe 

$299 

Demo version on the cover CD. Download trial at 

[w] www.adobe.com/products/ livemotion/tryreg.html 
PC and Mac 


What it does: 

Almost everything that Flash does. A big rival to Flash 
which lacks its extensive scripting tools, but benefits 
from the After Effects style keyframing, menus and 
level of control. Full interactivity is supported as with 
Flash, as wellas features like animated masks. It is 
fundamentally object-based rather than layer-based, 
as is Flash. lf you are an experienced AE user, you'd be 
much better off creating your SWF files with 
LiveMotion because you won't need to completely 
re-learn a new package. File sizes are generally larger 
than for Flash, but bitmap optimisation is better. 


Expression 2 

Creature House 

$149 

Download trial at [w] www.creaturehouse.com/ 
ordering.htm 

PC 


What it does: 

It is a unique art program using vector fractals rather 
than bitmaps, enabling organic designs. Also includes 
a great range of effects like blending modes and vector 
warping. Its strokes feature match Adobe Illustrators 
art brushes. Its SWF export is useful for creating Flash 
files which would otherwise be nigh-on impossible to 
produce in Flash because of Flash’s relatively limited 
drawing tools and stroke options. 


FreeHand 10 

Macromedia 

$399 

Demo version on the cover CD. Download trial at [w] www. 
macromedia.com/software/freehand/download/ 

PC and Mac 


Most closely related to Flash and used by designers, often in 
conjunction with Flash itself, FreeHand is capable of producing 
complex animation sequences with great simplicity. 


| 


What it does: 

Pretty much everything anyone could need for vector 
imaging for print, Web and the like. Most closely 
related to Flash and used by designers, often in 
conjunction with Flash itself. On its own, FreeHandis 
capable of producing complex animation sequences 
with great simplicity, making it a great tool for 
illustrators not versed in Flash who want to dip their 
toes in the animatorial waters. The interface in 
FreeHand 10 has been modified, as has Flash 5's, so 
many features are identical across the two packages, 
enabling experienced FreeHand users to be able to 
create in Flash very quickly, and vice versa for Flash 
users getting into illustration. SWF creation is based 
on creating multiple layers. 


Illustrator 9 

Adobe 

$399 

Download trial at [w] www.adobe.com/products/ 
illustrator/tryreg.html 

PC and Mac 


What it does: 

What FreeHand does, but differently. Undoubtedly the 
daddy of all vector illustration programs, although 
FreeHand and Illustrator have their factions, all with 
arguments about which is the better package. SWF 
export is more comprehensive in FreeHand, but the 
tools to export to SWF in /llustrator are nonetheless 
intuitive and make for great-looking Flash animations. 


QuarkWrapture 1.5 

Quark 

Price on request [t] 001 303 894 8888 
Download trial at [w] www.quark.com/products/ 
wrapture/demo.html 

PC and Mac 


What it does: 

Quark Wrapture, wait for it, creates wraps — cunning 
name, guys. It creates virtual package visualisations by 
fusing graphic design to a CAD structure, or in other 


Swift 3D has become the defacto standard for converting 3D 
models from various high-end packages directly to low 
bandwidth Flash SWF files. 


words, it wraps an item of CAD geometry. In the latest 
version, you can export a rotating 3D Flash file. Could 
have useful e-commerce applications. 


Amorphium Pro 

Electric Image Inc 

$229.00 

Trial download available at [w] www.amorphium.com/ 
welcome/ei.html. Purchase full product from 

[w] electricimg.com/store 

PC and Mac 


What it does: 

Creates and animates 3D text, objects and morphs 
using a keyframe-based timeline to control the 
motion, lighting, effects and backgrounds. Animations 
can be exported as Flash (SWF), animated GIF or 
QuickTime files. A good way for mid-range 3D users to 
export 3D content for viewing over the Web. 


Swift 3D 


Electric Rain 

$139, standalone $295, plug-in 
Download trial at [w] www.erain.com 
PC 


What it does: 

Takes 3D files from a number of formats and enables 
further animation of them and export to an optimised 
SWF file. There is a standalone, and plug-ins for 
SoftimagelXSI, 3ds max and LightWave. The Swift 
standalone has long been the dominant force in 3D 
Flash creation because of Vecta 3D’s lack of support. 


Vecta 3D 


Ideaworks 
$58, standalone plug-in for 3ds max $194 
PC and Mac 


What it does: 
Takes EPS, 3DS and LightWave files and converts 


SWF means ShockWave Format, however, there are 
two interpretations of the file extension, which 
requires two browsers, the Flash browser and the 
Shockwave browser. The standard Flash SWF 
format, which the software in the first listing exports 
to, can be viewed with the standard Flash plug-in. 
This plug-in is included as standard with all v4+ 
browsers. If for some reason you don't have it, your 
browserautomatically directs you to the auto-install 
area of the Macromedia Website to get it. The 
plug-in is very small and can be auto-installed ina 


few seconds. Internal coding within the export 


differentiates between the browser or plug-in that 
the SWF file you are accessing needs to use; most 
SWF content on the Internet is Flash content. 


them to animated Flash files. Vecta 3D was used to 
create the hit MTV2 Website. Can be either a 
standalone tool (only capable of rotating) ora 

plug-in for 3ds max which exports entire animations. 
Despite having lower file sizes than Swift, it doesn't 
work smoothly with the EPS import. Overall, though, it 
is the cheapest product and the results can be great if 
used in conjunction with 3ds max. 


Moho 2.6 


Lostmarble.com 

$99 

Download trial at [w] www.lostmarble.com/getmoho.html 
PC and Mac 


What it does: 

Mohois specifically a cartoon animation tool with 
numerous vector tools. It exports to QuickTime, AVI 
and Flash and can be used fora multitude of tasks from 
cartoon animation through to video titling. A great 
range of features for a very low price. 


Swish 2 


Swishzone 

$49.95 

Demo version on this issue's cover CD, full version 1.5 on 
cover CD of Computer Arts, issue 62. Download free trial 
version from [w] www.swishzone.com 

PC 


What it does: 

Creates and automates a host of effects and 
animations which would normally take much longer 

to produce directly in Flash. Special effects such as 
particles, automated glows and the like can be created 
incredibly quickly. This is the product most suited to 
working directly alongside Flash in a working 
environment. Architecture is based on entering 

text, modifying a range of parameters and exporting 

to SWF. 


KoolMoves 2.5 


koolmoves.com 

$39 

Demos version on cover CD. Trial download available at [w] 
www.koolmoves.com/ fproducts.html 

PC 


Swish enables rapid creation of quality animated text effects, 
such as this text and star system orbiting a planet. 


The programs which export to Flash 


SWFs don't include Flash’s great 
scripting abilities which are evolving in 
every upgrade. Flash’s scripting has 
changed significantly in Flash 5 and is 
now no longer ActionScripting. 


Macromedia has modified 


ActionScript so it is pure JavaScript, 
but in a simple to use drag and drop 


scripting environment. Macromedia 


What it does: 

Creates Flash animations with a simple interface, 
suitable for animation beginners. Has the capacity to 
importa variety of bitmaps and vector-based formats 
created in other applications. Also has many special 
effects — it even has a character boning function. 


Fireworks 4 

Macromedia 

$199 

Demo on cover CD. Download from [w] www.macromedia. 


com/software/freehand/download/ 
PC and Mac 


What it does: 

A great bitmap and vector tool, primarily used for 
creating Web-based graphics. Well interwoven with 
Dreamweaver, UltraDev and the like, Fireworks can 
create a variety of animation styles including animated 
GIFs with a variety of effects for application and simple 
SWFs, based on animations of bitmaps and simple 
vector tools. Great optimisation tools, including 
selective JPGs based on masking out non-important 
areas of your image and the ability to export to HTML. 
When used with Dreamweaver, you can edit images 
directly from Dreamweaver, streamlining workflow. 


Flax 

Goldshell 

$40 

Download available at [w] www.flaxfx.com 
PC 


Great export options to the SWF files make low bandwidth, 
highly complex models on the Internet a realisable future 
prospect rather than an unreachable pipedream. 


has removed the six JavaScript 
commands which weren't compatible 
across IE and Netscape, so there can 
never be any compatibility options 
with Flash files viewed cross browser. 
This evolution of ActionScript means 
that external scripting to the SWF file 
enables modifications to internal 
elements. The creation of the 


JavaScript Integration Kit for 


Dreamweaverenables HTML control 
over any JavaScript elements of the 
script. You can download this kit at 
[w] www.macromedia.com/exchange. 
Because JavaScript is more widely 
used than ActionScripting, the skill 
base for creating more interactive 
Flash movies is much higher and will 
enable Flash to dominate the Web 


animation market for years to come. 


What it does: 

FlaX is another text effect creator, however there is a 
marked difference between the quality of these 
effects and the ones you can achieve in other 
packages. The effects can all be modified in 
real-time and the quality is genuinely impressive: 
they all have a great organic, natural feel. There are 
only 24 in total, with more promised to come soon, but 
they are all very good-Looking and create files with a 
low file size. Effects range from perspective snakes to 
realistic gravity. 


After Effects 5 


Adobe 

Standard $649, Production Bundle $1499, 

Download available at [w] www.adobe.com/products/ 
aftereffects/tryreg.html 

PC and Mac 


What it does: 

Creates special effects for TV, video and film 

using an intuitive keyframe architecture, in which 
every aspect of every variable is animatable in 
terms of value and speed. The latest incarnation 

has the ability to export to the SWF format, with 
After Effects rasterising the advanced special effects. 
This can lead to huge file sizes which aren't suitable 
for the Internet, so After Effects SWF export is only 
suitable for moving, rotating and scaling imported 
graphics from a variety of formats, and thus has 
limited usage. The SWF export does not change 
between After Effects standard and the After Effects 
production bundle. > 


Insanetools has created an impressive, if initially confusing, 
interactive Flash creator which combines actions and triggers 
to create fully interactive Flash sites. 
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Wildform SWfX 


Wildform 

$25 

Download available at [w] www.wildform.com/resources/ 
download.php 

PC and Mac 


What it does: 

Creates .SWF animated effects on inputted text. With 
250 different effects there's lots of scope for quick 
banners and interesting headers — it will take youa 
long time to exhaust the creative possibilities. Some 
issues with backwards compatibility of imported SWF 
files, but a useful tool nonetheless. There are some 
great effects, but as you'd expect, there are some 
horrible ones too. Could have benefitted from more 
control over the parameters used in the creation of 
the effects. 


SWEX Flix 1.5 

Wildform 

$99 

Demo on the cover CD. Download available at 

[w] www.wildform.com/resources/ download.php 
PC and Mac 


What it does: 

Flix is the world’s first Flash video encoder. What this 

means is you can import a QuickTime, MPEG-1 or AVI 
file and export it as a Flash SWF file. Not unique now 
that After Effects 5 is out, but the range of options for 


export is far more comprehensive than Adobe's visual 
effects behemoth and file sizes are generally lower 
too. You can expect file sizes to still be very large with 
a reasonable loss of detail. There is also full support 
for WAV and MP3 files. 


trueSpace 5 

Caligari 

$99 

No trial available, buy at [w] www.caligari.com/ 
Products/ trueSpace/ts5/plugins/caligari/flash/ 
default.asp?Cate=Caligari 

PC 


What it does: , 

Exports 3D created within truespace 5.1 to the Flash 
SWF format. The plug-in fortrueSpace incorporates a 
number of different rendering modes, wireframe, filled 
and gradient. The file size of produced movies is quite 
small and the plug-in contains a good range of options 
for export. 


Insane 
Insanetools 
$29.95 


Download available at [w] www.insanetools.com 
PC 


What it does: 
Creates Flash movies which can also contain almost as 
much interactivity as Flash, LiveMotion and the like. 


Hard to believe at the price, but events, sounds, 
tweens and the rest can be created and exported 

to the SWF format, although there isn't any support for 
external scripting. The only downside to this 
incredibly low-priced solution is the unique and 
complicated creation system. However, there 

are a great range of painting tools and after a bit of 
mental re-jigging you will be able to create some 
impressive interactive files at a fraction of the cost of 
the real thing. Beginners will find /nsane a useful 
starter package for learning interactive media rather 
than just animation. 


Swiffworks 

Animo 

£375 

Download not available, information at [w] www.animo.com 
/products/swiffworks.htm 

PG 


What is does: 

Swiffworks is a new plug-in for Maya users who 
want to export to the SWF format. Based on the 
Cartoonworks architecture, Swiffworks is one 

of the most customisable 3D exporters. Enables 
complete control over the display of fold, silhouette, 
region, border and intersection lines and complete 
control over ink lines. All parameters can be 
animated over time, enabling realistic cartoons to be 
exported to Flash from your 3D gems. Full range of 
export options for the quality and file size of the 
resulting SWF file. 


Export to W3D for Shockwave 


LightWave 6.5 


NewTek 

$2495 

Public Beta available at [w] www.newtek.com 
PC and Mac 


What it does: 
Exports to the W3D format from LightWave 6.5. The 


WSD export capacity has been added to Newtek’s flagship 
3D product, Lightwave. 


Web Special 


exporter can export a mixture of lights, cameras, scene 
structure, objects and texture maps. Objects, texture 

maps and animations all have modifiable quality levels 
to optimise file size/quality relative to the final output. 


D Sculptor 
D Vision Works 


3D models this complex should soon make their way from film 
and video to the Web and CD-ROM thanks to great W3D 
exporters in high-end packages like Softimage. 


£500 
Plug-in included in the free software update, available at 


[w] www.d-vw.com/dsculptor/v101/sculptor102.htm 
PC 


What it does: 
D-Sculptor creates 3D objects from a selection of 
photographs. This is the only 3D object creator working 


Great export options enable Maya artists to incorporate their 
work into Shockwave content, for viewing on CDs and over 
the Internet. 


3ds max, dominator of the professional 3D arena, continues to 
reach further afield with its new W3D export functions. 


from flat images which exports to the W3D format. This 
enables you to take a variety of photographs 

of an object, create the 3D model in D-Sculptor 

and then export directly to the Web in the W3D 

format — possibly the easiest way to create 

W3D content. 


Maya 4 
Alias|Wavefront 
£15,933 | 
Plug-in download available at [w] www.aliaswavefront. 
com /en/Community/Special/shockwave/ 
shockwave_m.html 

PC 


What it does: 

One of the most respected 3D tools inthe 
world, Maya has a suitably high quality W3D 
exporter. Only available for Maya 3.0 and later, 
this tool enables the exporting of all elements of a 
Maya created scene to the W3D format. 

The download is free to registered users. 

Maya Builder, the lower priced version used 
specifically for modelling, also has W3D export 
functionality. To find out more go to 

[w] www.aliaswavefront.com/en/Community/ 
Special/shockwave/shockwave_m.html. 


Directoris a more comprehensive tool for 
multimedia creation than Flash, incorporating an 
entire programming language, Lingo. When you 

visit [w] www.shockwave.com, many of the SWF files 
you see have been created in Director, 

which has a greater degree of interactivity and 
commands available; making it perfect forthe more 


complex interactive games on the Internet. Director 


exports to a higher form of SWF file. The content is 


viewable in the Shockwave standalone browser or 
your Web browser which has the Shockwave 
specific plug-in. Again, this is now included with 
most new browsers; if not you will have to download 
it from [w] www.macromedia.com. The main 
difference is that this is a much more complex 


browser with a much longer download time. 


Director 8.5 finally incorporates 
non-Lingo based 3D elements 
governed by the new .W3D format. The 
latest version of the Shockwave 
browser enables you to view .W3D 
content through your Web browser. 
Now, many of the top 3D packages 


3ds max 4 


Discreet 

£3166 

3ds max 4.0 plug-in available at [w] www.macromedia.com 
/software/director/download/ 

PC 


What it does: 

The first W3D exporter, compatible with 3ds max 3.7 
and 4.0. It also comes included as standard with the 
Director 8.5 standalone or upgrade. This exporter 
also covers all the elements you could expect to 
find ina 3D scene. Animation support isn't the 

best and can be a hit and miss affair depending 

on the complexity of your modelling. Individual 
elements of a scene can be individually exported. 
There are a good range of parameters to streamline 
your output. 


ImageModeler 2 

Realviz 

Price depends on 3D system: full floating with dongle 
$4500, for LightWave, Softimage, 3ds max and Maya 
$2900. Product available to download at 

[w] www.realviz.com/ downloads 

PC 


What it does: 

ImageModeler contains an internal converter for the 
W3D format, so no plug-ins needed. Has the ability to 
export all standard elements, although contains less 
modifiable parameters than the 3DS exporter. The 
software itself has export options to almost every 
known 3D format, including MTS, MA, 3DS, CA, XSI, 
DXF, OBJ and more. 


Swift 3D's rival, Vecta 3D, has been responsible for a great 
number of 3D Flash sites, and was the subject of a 3D Flash 
tutorial in Computer Arts Special, issue 18. 


export scenes containing 3D objects 
into Director. From there, you can use 
drag and drop Lingo commands to 
specific 3D objects within the scene to 
enable you to navigate around the 3D 
scene, add interactivity such as marker 


jumps to specific objects, rotate 3D 


objects and zoom in. There are 
possibilities for e-commerce and 
product presentations, as well as the 
simple creation of immersive 3D 
environments, which never really took 
off with the likes of other Web and 
multimedia formats like .W3D, 


Softimage|XSI 1.5 


Softimage 

$7995 

Download from [w] www.softimage.com/download/ 
xsi/converters/ 

PC 


What it does: 

Maya's big rival at the 3D top end, the XS/ 

Shockwave 3D Converter converts files saved in the 
XSI v3.0 file format to W3D format. Again, all elements 
of a 3D scene can be exported, and the animation 
exporter is particularly accurate. 

The XSI v3.0 format can be created in either 
Softimage/XSI (version 1.5, 2.1 or higher) or 
Softimage/3D (version 3.9, 2.2 or higher), which 

should cater for most Softimage users. 


form.z 3.8 


auto.des.sys 

Download available at [w] www.formz.com/ web_site_ 
2000/frames_pages/downloads.htm 

PC and Mac 


What it does: 

3D general modelling tools, combing solid and 
surface modelling and such high-end features as 
radiosity. The latest update, which includes the ability 
to export for the W3D format, will be available 

for users to download at the Website at 

[w] www.formz.com shortly. GEES 


Useful tool for converting your video files to SWF files, for easy 
distribution around the world. Don't expect bandwidth-friendly 
file sizes though... 
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You can't afford to miss the ultimate event for 


digital artists and designers... 


he third annual Computer Arts 
T LIVE show is going to be an 

unmissable event for readers of 

our magazine and digital artists 
everywhere. It brings you the chance to see 
some of the biggest names in the design 
industry, all presenting their latest projects. 
They'll be discussing their creative 
inspirations and technical innovations, 


revealing their tips and techniques, as well 
as answering all of your questions — live! The 
event will be an ideal place for you to make 
industry contacts, and to get first-hand 
information on the latest, cutting-edge 
creative techniques. 

This year the show is bigger than ever — it 
will be held in the Main Hall at the Business 
Design Centre in Islington, North London. 


Once again, we have the backing of key 
software and hardware companies as 
sponsors. These include Adobe, 
Alias|Wavefront, Discreet, Extensis and 
Wacom. The bigger venue means we have 
room to host a bigger exhibition as well. As 
we go to press, more than 20 companies 
have signed up to present their goods and 
services on the show floor, and there will be 
many more by the time the show opens. 

Browse this show bill for Computer Arts 
LIVE/O1, and we're sure you'll want to be in 
on the action... 


THE SPEAKERS THE EXHIBITORS SPONSORED BY ASSOCIATED WITH 
lan Anderson, BT Openworld d i scre et ny MEDIA 
Will Byles, Softimage . SHOWCASE 
Hillman Curtis, Springer 
Mike Hopwood, Gomark 
Brendan Dawes, Galleryonthenet i Si a aha 
Andy Barmer, Corps Business 
lan Bird, OPM Response 
Ben Lock, ELSA Alias| wavefront 
Arber and May, Bullet Point [red sauce] 
Daljit Singh and Nick Cristea, Hoxton “ZDworkd 
William Latham, Pearson Education 
Andy Boyd, Stac 
Anthony Rowe, HiSoft 
Mark Towse, Ravensbourne College of Design 

Polaroid 

Metro New Media 

Az'tech Graphic Design 

Fo2Pix 

Connectix 

IBM 

Book Clubs Associates 

Markzware 

Digital Heaven 

ESSENTIAL DETAILS 


Join us at The Business Design Centre, Islington, London on: 


10/11/12 OCTOBER 


Tickets start at £8 per day. Order online or call the hotline: 


0870 120 0720 


Keep up to date on the show content at: 


www.computerartslive.co.uk 


our designer leading studios will be 
invited to take part ina panel discussion, 


- looking at the state of the industry froma 

creative angle. We haven't finalised the list of 

- panellists as yet, but watch the Website at 
[w] www.computerartslive.co.uk for the news. 


15:15pm: The Designers Republic 

_ One of the biggest names on the British 
graphic design scene, The Designers 
Republic has broadened its remit and its 
fame since day one, while presenting new 
and challenging concepts in modern design. 
Founder lan Anderson will be interviewed 
about his company’s latest projects, its past 
victories and future ambitions. 


16:15pm: Adobe presents... ; 
Asa show sponsor, Adobe will be inviting to 
the stage one of its clients to discuss print 
design and the use of PDF in the modern 
workflow. This is a great opportunity to see 
how leading publications are working today. 
We don't yet have confirmation of speakers, 
but watch this space... 


17:15pm: Prize draw 


At the end of each day we'll announce the 
winners of a prize draw. You can enter these 
draws at the Computer Arts booth. 


arts 


The exhibition floor 


This year Computer Arts LIVE/O} 
is bigger than ever. We've got the 
entire main hall at the Business 
Design Centre and this means a 
much larger exhibition area 
Companies are signing up fast, 
but as we go to press the 
following exhibitors will be 
showing their wares — from 
books to hardware, recruitment 
and training to software, they'll 
allbe there... 


Bullet Point {red sauce] 
Hoxton 

Digital Heaven 
Pearson Education 
Stac 

HiSoft 

Ravensbourne College of Design 
Polaroid 

Metro New Media 
Az‘tech Graphic Design 
Fo2Pix 

Connectix 

Book Clubs Associates 
Markzware 


We also have three sponsored 
workstation areas, kitted out with 
IBM Intellistations and Macs. 
Various new technologies will be 
demonstrated for creative users: 
BT Openworld — a look at the 
potential of broadband Internet 
Softimage — your first chance to 
see XS/2.0inthe UK 
Alias|Wavefront — with a big 
focus on Mayaon the Mac 
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Thursday 


Day two promises to be unmissable with Discreet, the winner of the EJAA 
Award and Flash phenomenon Hillman Curtis taking the stage... 


10:15am: Discreet and Peppers 
Ghost 

Our sponsor, Discreet, invites to the stage 
Ben Lock, Head of Digital Production at 
Peppers Ghost. He'll be revealing how the 
studio uses Discreet tools like 3ds max, 
character studio, combustion and editto 
create broadcast-quality CG animations for 
television, including the soon-to-be-aired 
Tiny Planets and the company’s current 
production, Bus Stop. 


11:15am: Pixelsurgeon 


Set up by Richard May and Jason Arber, 
Pixelsurgeon is a unique online community 
of graphic designers and digital illustrators. 
They will philosophise about the design 
industry and discuss the inspiration behind 
their recent works. If the number of hits 
Pixelsurgeon gets is anything to go by, we'll 
be in for one interesting discussion. 


12:15pm: EJAA Award 


The European Junior Animators Award will 
be presented live on stage. With a first prize 
worth £15,000, and judged by a panel of 
industry greats, it’s a prestigious way of 
stepping onto the 3D animation scene. (See 
page 14 for details.) Come and see the latest 
talent, and check out the winner. 


13:15pm: Hillman Curtis 


Hillman Curtis is a man, a design agency, and 
a Flash phenomenon — and he's flying over 
from the States. No Web designer can afford 
to miss his talk at Computer Arts LIVE/01, in 
which he'll be broaching the topic of how to 
find and use inspiration in order to keep 
online design projects fresh and effective. 


“[ will share our process at hillmancurtis 
for collecting inspiration and 
Utilising 10 ac 


14:15pm: Panel Discussion on 3D 


The theme of this live panel discussion is 3D 
Games: The Design Challenges. Our panel 
will include graphics artists and creative 
directors from some of the UK’s top games 
development houses. Drop by and find out 
what creating game visuals is all about. 


15:15pm: Digit 

Man cannot live by Web alone... This is the 
theme of the talk by Daljit Singh and Nick 
Cristea, who are creative heads at this 
award-winning London new media studio. 
Already responsible for the award-winning 
[w] www.mtv2.com site, Digit has been 
combining various media with co-ordinated 


Web and broadcast campaigns, including 
interactive booths in retail outlets. 


16:15pm: William Latham 


This innovative artist was on the forefront of 
the evolutionary or organic art movement in 
the 90s. Today he’s Creative Director at 
Computer Artworks, a company producing 
everything from computer games to book 
jackets and fabric patterns. A hit at last year's 
show, this year he'll be even better. 


17:15pm: Prize Draw 


Don't miss Thursday's prize draw. If you've 
entered the draw at the Computer Arts booth 
on the exhibition floor, you'll be in with a 
chance of winning. 


Friday 


From creating for Interactive TV to software bras, plus Aardman Animations 
talks about its burgeoning new CG wing... 


10:15am: Alias|Wavefront 
presentation 

Show sponsor Alias|Wavefront invites the top 
British motion graphics house Glassworks to 
the stage. Animator Andy Boyd will lead a 
demonstration of how the company has used 
Mayato create graphics and effects fora 
range of commercials and promos. He'll 
include the work done on cyberchick Trina 
for Triumph’s ‘software bra’ ads in 2000, and 
the creation of the talking animals for 
Schweppes’ new television commercials. 


11:15am: TBC 
12:15pm: Aardman Animations 


From Morph to Chicken Run, Aardman has 
put itself at the forefront of the claymation 
technique of animation. Over the past two 
years, however, the company has been 
establishing a CG department within its 
Bristol studios. Will Byles, Aardman's Head 
of CG, will talk about how the company is 
maintaining its style in computer animation. 


13:15pm: Wacom presents 


Wacom’s tablets provide the most intuitive 
possible link between the creative hand and 
the computer. The company will be inviting 
one if its expert users to share tips and 
techniques for using graphics tablets. 


14:15pm: Panel Discussion on 
Illustration 


A panel of top illustrators — both freelance 
and studio-based — will join us to discuss 
commercialism in illustration, threats to the 
profession, agencies, and the way forward for 
committed illustrators. We'll have speakers 
from Attik, and 12:10, and freelancer David 


ESSENTIAL DETAILS 


Join us at The Business Design Centre, Islington, London on: 


Newton will be along to throw his ideas into 
the mix. 


15:15pm: squids ou p 

If you've read our cover feature on page 30, 
you'll know that squid s 0 u p is ahead of the 
game when it comes to developing 
Shockwave 3D games and other content 
online. Its aim is to expand thought within 
interactive art and design, and they have a 
client list that includes Intel, Levis and Audi. 
Anthony Rowe will be showing us how to 
create Shockwave SD live on stage. 


H 


16:15pm: Bigimact TV 

Mark Towse, founder of Bigimpact TV, will be 
talking about Interactive Digital TV. Focusing 
onthe two most dominant systems in the UK, 
Europe and America, Open TV and Liberate, 
he'll discuss the merits of iTV from creative 
and production points of view, and give both 
design tips forthe medium. 


17:15pm: Closing prize draw 


Stay until the very end to find out if you are 
the lucky winner. 


‘I'll be discussing the importance of 


understanding traditional animation and 


acting techniques when using CGI” 


— Will Byles, Aardman Animations 


SPONSORED BY 


10411712 OCIOBER \ 


Tickets start at £8 per day. Order online or call the hotline: 


0870 120 0720 


Keep up to date on the show content at: 


Alia s|\ wavefront 


www.computerartslive.co.uk 


discreet MEDIA) 


ASSOCIATED WITH 


SUPPORTED BY 


Other attractions 


Digital art gallery 

See the finest artwork from the 
magazine reproduced ata high 
level of quality and curated 
gallery~style. If you've had 

your work th the mag, come.and 
see if your images have brought 
you even more recognition, 


Computer Arts booth 

Atthe Computer Arts booth you 
can grab the latest coples of 
Computer Arts and Computer 
Arts Special, as well as 3D 
World, Cre@te Online and Mac 
Forrmat, You'll be able to chat with 
staff and subscribe. !f you wish to 
drop off work for Exposure you 
can do it here, but remember to 
inciude printed contact details 
and information with any CDs or 
Zips intended for Exposure. 


Speakers lourige 

This item isnt confitmed yet, but 
we're hoping to host an area 
where our speakers can unwind, 
You'll be able to meet them and 
share ideas with the CA team. 


Cyber cafe 

There will be a cyber café at the 
show, 86 you can keep in touch. 
with your email and the Web. 


Workstation pods 

Sponsored by Alias|/Wavefront, 
Softimage/Avid and BT 
Openworld, you'll find 
workstations dotted around the 
exhibition, Visitors will be able to 
stop and have one-to-one demos 
of new apps, and try some of the: 
programs themselves. Some 
sessions will be led by experts 
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The Exhibition 


Here's our handy guide to all the stands at the exhibition. Check out the map 
Opposite so you don’t miss out on the speakers or seminars... 


11 — Workstation area: Softim | iti sprites ech 
Annex | aeat Oy ase | The exhibition floor Event: Computer Arts LIVE/O1 
| D 2 10, 11,12 October 
01 — Main seminar hall | 12 — Workstation area: Alias|Wavefront | 22 — Metro New Media eee Bilatioas sawed Chet 
| | Islington, London 
02 — Secondary seminar hall | 13—Stac | 23— Hoxton Bibliotech Advance ticket prices: £12 single 
| day, £18 three-day ticket 
| 14—ELSA See SMadounre Ticket Hotline; 0870 120 0720 
| Online: www.computerartslive.co.uk 
The exhibition floor 15 — OPM Recruitment 25 — Galleryonthenet 
03 — Fo2Pix | 16—Gomark | 26—Wacom 
04 — The Corps Business | 17—Ravensbourne College of Design | 27—Connectix 
| | 
| | 
05 — Polaroid | 18—HiSoft | 28 — Workstation area 
| 
06 — Extensis 29 — Bullet Point {red source] 
07 — Aztech Graphic Design The LIVE area | 80— Macromedia 
08 — The Computer Arts Stand 19 — The Computer Arts Main Stage . 31— Workstation area: BT Openworld 
09 — Pearson Education | 20 —Video Wall and Cybercafe 32 — Adobe 
10 — Alias|Wavefront | 21—Gallery | 33—Digital Heaven 
ESSENTIAL DETAILS SPONSORED BY ASSOCIATED WITH SUPPORTED BY 
Join us at The Business Design Centre, Islington, London on: d isc re et e By MEDIA e 
- | SHOWCASE 


10/11/12 OCTOBER 


Tickets start at £8 per day. Order online or call the hotline: 


0870 120 0720 


Keep up to date on the show content at: 


www.computerartslive.co.uk 


Alia si wavefront 
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1. The Surfstation site, 

which now has 16 editors, is 

still developing. “We have Wu 
made a different layout for ° 

every section,” says Led on cionest nec sciamantmeeuniend 


Thomas. “We initially $5. wear han treton senie ae 


decided to do this in order 
. mn = rome 
to have maximum Sal SSS SS ST Se 


opportunity to do 
interesting work, and to 
keep the site fresh. The fact 
that we never get stuck ina 
restricting template 
scenario is probably the 
one thing that has kept us 
all interested in the project 
over the past 14 months.” 


SURFSTATION ORIGINAL RINGER T-SHIRT 


2. Covers for the k10k and 
Pixelsurgeon Websites. 


SPECIAL INTRODUCTORY OFFER 
PRICE: $20 (usD) 

includes 
SIZES: S,M,L,XL 
PRINT RUN: 250 
PRODUCTID #: SD 0001 
COLORS: WHITE w/BLUE PRINT (BACK & FRONT) and BLUE 

BORDERS 
DESIGN: Custom typeface designed by - Spells out 

“surfstation” on the front, Ju" on the back. ~~ 4 Ss 


wre necmanwemn § SF 


propuct OALLERY_ 


We are encouraging people that buy'e our ie products to seni us photo’ = of 
themselves wearing the shirts, etc. For each individual product, we will have a 
product gallery (like the one below), and the ones we think are 


, >” ato ie 
SHIRTTYPE: "RINGER T-SHIRT" / HIGH QUALITY . F? 
DELIVERY TIME : 9-5 WEEKS : . iene Wy 


Cans! : 
(MERCHANDISE 


MERCHANDISE 
COMING SOON 
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KiOk deck issuma 


oae_L00 
by doshue Gavia 


the Inferno, Purgatorio, and Paradiso 


Updated: 2000/12. 
i * of desktops: 1808 


Tao cos" seem une oe rat wee 


Somotimes we think 
T) that maybe we should 
Just give up. 


Thomas Brodahl 


“Working hard on a project and seeing new things develop is 
the greatest kick I get - well second greatest at least,” says 
Surfstation mastermind Thomas Brodahl 


ometimes | come into a design with a very could inject a bit of Life into the scene. Ryan Holsten copying off each other, and | honestly don't see much of 


clear idea of where | want to take it, and 
other times | just know the destination, but 

/ not the journey,” says Norwegian-born 
Thomas Brodahl, the motivating force behind 
Surfstation and Xtrapop.com. 

It's a journey he’s clearly addicted to, and with a 
proliferation of personal and commercial projects 
under his belt, it’s hard to believe that BrodahLis still 
only 24. “I think working inspires me most,” he says, 
“just jamming on the Mac, trying to come up with new 
and interesting designs while listening to good music. 
That's when I’m in my element, that’s when | get 
inspiration. | think the greatest thing | have going for 
me is that | love creating. Working hard on a project 
and seeing new things develop is the greatest kick | 
get... well, second greatest at least.” 

What the first greatest is, he’s not saying but 
devotees of the Surfstation Website with its trademark 
babes, cars and eye-watering use of colour, might 
hazard a few guesses. The site was born out of a 
dissatisfaction with the Web scene at the time. The fact 
that a site he was involved in, mental.nu, wasn't getting 
off the ground and sites like kiiroi.nu, artistica.ccom 
and uploading.com appeared to be stagnating or 
disappearing altogether, so Thomas approached Yohan 
Gingras and German Olaya in early 2000 to see if they 


and Errol Richardson stepped on board and the result 
was the seminal monthly online, which is currently put 
together by about 16 editors globally. 

“There is a lot of great talent out there, and we never 
run out of good links to post in our news column,” says 
Brodahl. “Many people complain and bitch about how 
Web design is going downhill, and people are just 


that. If anything, | would say that the sites we're sent 
these days are getting better and better. Of course 
there are also several thousand bad sites, but the good 
ones are coming in at a much higher rate than 12 
months ago. 

“The Web design community has given me a lot, 
and | try to give back as best | know how. How can > 


Surfstation 


Ina recent profile for [w] www. 
computerarts.co.uk, Thomas said that 
the team’s short term goals were to 
streamline the site, get rid of some 
sections, add new ones, and keep it 
fresh. This still applies today, with a 
few additions. 

“Since we last spoke, the index 
page has been redesigned, and is now 
100 per cent database driven,” says 
Thomas. “Everything you see on the 


main page is controlled through our 
admin system. This makes all the 
tedious updates much easier and less 
time-consuming. 

“We also killed off some sections 
which weren't working: either they 
didn't get enough submissions, or the 
concept was flawed. That’s how the site 
works - we try out new ideas, and if 
they bomb, we get rid of them. It's 


meant to be free-flowing and organic, 


and | think that is one of its greatest 
strengths. We've also added eight new 
editors which help spice up the news. 
As they get more familiar with the site, 
you will see their influence in its 
development. Surfstation is definitely 
here to stay. The way things are going, 
its hard for me to envision a time 
where we would close it down, and 
judging by all the great feedback, it’s a 


valuable resource for our visitors.” 
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this be a bad thing? People should stop complaining | wanted to do, and so much crap that | knew | could do 
and start producing. That's my take on the design | better-| just didn’t know where to start. Then one day | 
scene at the moment.” | sawaposterthat advertised HTML3 crash courses for 

And producing is something Thomas knows a lot Mac users. | sat through three hours of Fetch, BBEdit, 
about - since being introduced to HTML at the and at the end, | had my own ‘Welcome to Thomas’ 
University of Virginia (1996-97) he’s put together his homepage’ up and running. That afternoon | went to the 
own site Xtrapop.com as well as SS and numerous bookstore and bought Teach yourself HTML4 in 14 
print and Web commissions. Days, and the rest is history.” 

“| had been online for about six months when | got to While his personal interests were flourishing, 
UVa, and | had already become totally addicted to the finances were, unfortunately, dwindling. “Like | said, | 
medium. After | found a TS line just sitting there waiting was having so much fun, but it quickly turned into too 
to be used, surfing the Web became a favourite much fun, and spending $25,000 a year to have a good 
pastime. | saw so many good things on the Web that | time was a luxury | could no longer afford. So! moved 


Xtrapop 


Xtrapop is a personal portfolio, based displays, sol used that to keep the site to howrestricted | was when | was ina 


ona magazine format. “I had just ever-changing (the same scriptis used full-time job. I'm much more 


discovered the wonderful world of for the Surfstation splash pages).” productive and creative when | have 


‘iframes’ and decided to use them to Originally the portfolio was put more free time, so I’m trying my hand 


the fullest,” explains Thomas. together to show at job interviews. “I at freelancing fora while.” As 


“Graphically, | wanted the site to look decided | needed a portfolio in order circumstances change, so does the 


like a magazine, with a crease in the to get a job in London. Of course | portfolio. “Since | am no longer looking 


middle, and full-page editorial-style picked the worst time ever to go job for a job, | may change Xtrapop and 


illustrations on the left side. A former hunting, so | wasn't terribly successful. make it more commercially-oriented. | 


colleague of mine had developed an It's actually just as well, because the need to land clients, and the current 


ASP script for randomising page 


last month has really opened my eyes site is a tad too personal for that.” 


Web Special 


3. “Splash pages. Jakob Nielsen hates 
them, but they sure are fun to make.” 


4. A cover for a group of 10 journals that 
will be passed from around the world: a 
sort of digital pass-the-parcel. “A great 
idea and agreat project that I'm 
honored to be a small part of,” says 
Thomas. 


5.“I wanted to do something different 
with this site. | wanted it to be very 
personal, and at the same time show off 
my skills. Right now | am working on 
redesigning Xtrapop to be more 
commercial, and | may transfer the 
existing site to a different domain, 
where it will serve as a purely personal 
playground.” 
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back to Luxembourg to see if | could turn my HTML 
hobby into a business.” While in the States, Thomas 
had set up a company, Coretech, with his room mate 
for $50 and had planned to do the same back in 
Luxembourg, but discovered it would require two 
University degrees, a year’s experience, and $10,000 - 
which somewhat put the brakes on things. As a stop 
gap, he worked throughout 1998 as a marketing 
assistant designing brochures and letterheads at his 
father’s company, Slipstop. 

Then in January 1999, he contacted Visual Online, 
where he worked as ‘the sole creative,’ meeting 
clients, coming up with concepts, designing and 
coding. Thomas left Visual about a month ago, and is 
planning to move to London in September. “I am 
currently looking for a house there (call me if you 
have any leads). I'm gonna be moving in with two 
high-school friends, Alex and Guy. It’s not a terribly 
well-thought-out move, but it was time for a change, so 
| decided to take a leap.” 

Meanwhile, the work doesnt stop, with a Website, a 
print campaign, and Flash movies for a Flash clip-art 
CD on the drawing board, as well as personal projects, 
such as pages in the inertia album (http://album.d2. 
hu/), a cover for 1000journals ([w] www.1000journals. 
com), and title sequences for an independent movie 
shot in Luxembourg. Luckily for us, it looks like the 
journey is still ongoing. EES 
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Shockwave,3D: 10 mini 
projects for Director 8.5 


We show you how to generate and control components of a 3D world such as 
model primitives, shaders, textures, lights and cameras using new 3D Lingo 


WJ acromedia Director 8.5 

{ f Shockwave Studio now includes 
i j Intel Internet 3D Graphics 

$i J software. Scalable real-time 3D 


features are fully integrated with the 
Shockwave Player and provide an easy way to 
deliver interactive, three-dimensional Web 
and CD-ROM content including games, 
e-commerce and entertainment. 

Now you can use 3D modelling tools like 
3ds maxto create your models, export them 
into the W3D format, import them into 
Director and manipulate them with 3D Lingo. 
You can also generate major components of a 
3D world from scratch in Directorusing Lingo. 


In this article, we present 10 ‘how to’ sessions 
on using new 3D Lingo commands to 
generate model primitives, shaders, textures 
and other basic components of a 3D world. 

You'll find an HTML file called main.html 
on the cover CD. It demonstrates all of the 3D 
content and effects explained here, and 
describes in detail how to use 3D Lingo. Feel 
free to save this file onto your hard disk, drag 
it into your browser and start learning. Just 
make sure that all the DCR, HTML, SWF and 
CCT files that come together on the cover CD 
are in the same folder as main.htmlL file. Fire 
up your version of Director 8.5 Shockwave 
Studio and get started. > 
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1: Box primitives 


How to specify some of the major components of your 3D world, such as lights and cameras and create a 
box primitive that uses a default checkerboard shader 


Properties 
Banovters— 
= on = Tinea 


Use the Dolly, Rotate and Pan Camera buttons to view your 3D 
world then edit it in the Property Inspector window. 


Step 1: Select the first thumbnail in the cast window. Create 


an empty 3D world and 3D castmember by either opening 


up a Shockwave 3D window and naming your 3D member, 


or typing new#shockwave3D in the message window. 


Step 2: Drag your new 3D memberto the first channel in 
the Score window. 


Step 3: Attach the following script to sprite(1): 


on beginsprite me 


* reset the member's properties to the values stored when 
the member was first loaded into memory: 


member(1).resetWorld() 
* create a new model resource: 


abox=member(1).newModelResource(“abox”, #box, 
#both) 


+ specify the #box model resource properties: 
abox.width=20 

abox.length=20 

abox.height=20 

* create a new model that uses the #box model resource: 
ourbox=member(1).newModel(“ourbox", abox) 

* create a new ambient light: 
amb=member(1).newLight(“ambient”, #ambient) 


+ specify the RGB values of the ambient light: 


amb.color=rgb(255,255,255) 


+ specify the RGB values of the ambient light that the box 
faces will reflect. Notice that in this example we are using 
shaderlist[1],...shaderlist[6] to affect all outside faces of the 
box. For the box primitive there can be up to 12 entries for 
the shaderlist since there are six sides and every side has 
two faces, inside and outside. If we just use shader as 
opposed to referring to a specific entry in the shaderlist{ ] 
we will only affect one face of the box: 


ourbox.shaderlist[1].ambient=rgb(255,255,255) 
ourbox.shaderlist[2].ambient=rgb(255,255,255) 
ourbox.shaderlist[3].ambient=rgb(255,255,255) 
ourbox.shaderlist[4].ambient=rgb(255,255,255) 
ourbox.shaderlist[5].ambient=rgb(255,255,255) 
ourbox.shaderlist[6].ambient=rgb(255,255,255) 


*you can also say: 
ourbox.shaderlist.ambient=rgb(255,255,255) 


-in this case shaderlist serves as a shortcut to affect all 
faces of the box: 


* set the camera position 
sprite(1).camera.transform=transform() 


sprite(1).camera.transform.position=vector(0,0,50) 
end 


2: Editing major components 


How to use the Shockwave 3D and Property Inspector windows to look at the 3D world that is generated 
with Lingo and edit some of its major components 


Komave Keytrame 
non 


Use 3D Lingo to generate your 3D world. Use Shockwave 3D and 


Property Inspector windows to view and edit your 3D world. 


Step 1: Generate your 3D world (models, lights, cameras, 
and so on..) 


Step 2: In the toolbar, find the Shockwave 3D Window 
button and click on it or just double-click on your 3D sprite 
on the stage. 


Step 3: Now you can view your 3D World in the Shockwave 
3D Window. There are three main buttons: Dolly Camera — 
to zoom in/out; Rotate Camera — to rotate the camera; Pan 
Camera — to move the camera. Open up the Property 

Inspector window and click the 3D Model tab. Now you can 


edit Shader Textures and Director Light, and choose colours 


for the Ambient, Directional, Background, Diffuse and 
Specular lights. 


Step 4: After you are completely satisfied with the way 
your 3D world looks, click the Set Camera Transform button 
in the Shockwave 3D window to reflect all the changes on 
the stage. 


3: Applying shaders 


How to apply shaders and textures made from other castmember images to the box primitive faces 


Step 1: Create an empty 3D world. 


Step 2: Create a box model resource and specify all 
its properties. 


Step 3: Create a new model that uses the #box 
model resource. 


Step 4: Create an ambient light. 


Step 5: Specify the RGB values of the ambient light. 


Web Special 


Step 6: Make sure that you have six castmembers with 
some images and name them ‘red’, ‘blue’, ‘yellow’, ‘green’, 
‘purple’ and ‘aqua’. Create new shaders and textures that 
your box uses: 


ourshader=member(2).newShader( “red” ,#standard) 
textr=member(2).newTexture( “red” ,#fromCastMember,me 
mber(“red")) 

ourshader.texture=textr 

ourbox.shaderlist[1]=ourshader 


ourshader2=member(2).newShader(“ blue" ,#standard) 
textr2=member(2).newTexture(“ blue” ,#fromCastMember, 
member(“blue”)) 

ourshader2.texture=textr2 
ourbox.shaderlist[2]=ourshader2 


ourshader3=member(2).newShader( “yellow” ,#standard) 
textr3=member(2).newTexture(“ yellow” ,#fromCastMembe 
rrmember(“yellow”)) 

ourshader3.texture=textr3 
ourbox.shaderlist[3]=ourshader3 


ourshader4=member(2).newShader(“ green” ,#standard) 
textr4=member(2).newTexture(“ green" ,#fromCastMember, 
member(“green”)) 

ourshader4.texture=textr4 
ourbox.shaderlist[4]=ourshader4 


ourshader5=member(2).newShader( “purple” ,#standard) 
textr5=member(2).newTexture( “purple” ,#fromCastMember 
;member(“purple”)) 

ourshader5.texture=textr5 

ourbox.shaderlist[5]=ourshader5 


ourshader6=member(2).newShader(" aqua” ,#standard) 
textr6=member(2).newTexture(“aqua" ,#fromCastMember, 
member(“aqua”)) 

ourshader6.texture=textr6 
ourbox.shaderlist[6]=ourshader6é 


Step 7: Specify the RGB values of the ambient light that the 
box faces will reflect. 


Step 8: Set the camera position. 
Note: An open-sided cube can be created using the 
following Lingo code. You have to make sure the top and 


bottom sides of the #box model resource are opened: 


abox.top=false 
abox.bottom=false 


value of the ambient light then create new shaders and textures, 
and apply them to open-ended box primitive faces. 


4: Sphere primitives 


How to create a sphere primitive that uses shaders and textures made from other castmember images 
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We've created an opened sphere but if you don't specify the start 
and end angles, you create a closed sphere. 


Step 1: Create an empty 3D world. 


Step 2: Create a sphere model resource and specify all its 
properties. In this case we create an opened sphere: if you 


don't specify the start and end angles you create a 
closed sphere: 


asphere=member(2).newModelResource(“asphere”, 
#sphere, #both) 


asphere.radius=10 
asphere.startAngle=0.0 
asphere.endAngle=320.0 


Step 3: Create a new model that uses the #sphere 
model resource: 


oursphere=member(2).newModel(“oursphere”, asphere) 
Step 4: Create an ambient light. 

Step 5: Specify the RGB values of the ambient light. 
Step 6: Make sure that you have two castmembers with 


some images and name them ‘graphicl’ and ‘graphic2’. 
Create new shaders and textures that your sphere uses. 


Notice that we are using shaderlist[1] and shaderlist[2] to 
affect both sides, inside and outside, of the sphere. If you 
just use shader as opposed to shaderlist[ ] you only affect 
the outside surface of the sphere. 


ourshader=member(2).newShader(" graphic1" ,#standard) 
textr=member(2).newTexture(“ graphic", #fromCastMemb 
er,member(“graphic1")) 

ourshader.texture=textr 

oursphere.shaderlist[1]=ourshader 


ourshader2=member(2).newShader(“graphic2” ,#standard) 
textr2=member(2).newTexture( graphic2" ,#fromCastMem 
ber, member(“graphic2")) 

ourshader2.texture=textr2 
oursphere.shaderlist[2]=ourshader2 


Step 7: Specify the RGB values of the ambient light that 
the sphere surfaces will reflect. 


Step 8: Set the camera position. 


5: Plane primitives 


How to create a plane primitive 


(a a 


Lock Sprite 
| _ Unlock Sprite 
mag Cot Sprites: 
Copy Sprites 
Paste 
Select, 


insert Keytrame 
femave Keytrame 
Tweening.. 


Create a new model that uses the plane model resource and 
create new shaders and textures that affect both sides. 


Step 1: Create an empty 3D world. 


Step 2: Create a plane model resource and specify all 
its properties: 


aplane=member(2).newModelResource(“aplane”, #plane, 
#both) 


aplane.width=20 
aplane.length=20 


Step 3: Create a new model that uses the #plane 
model resource: 


ourplane=member(2).newModel(“ourplane”, aplane) 
Step 4: Create an ambient light. 
Step 5: Specify the RGB colour values of the ambient light. 


Step 6: Make sure that you have two castmembers with 
some images and name them ‘graphic!’ and ‘graphic2’. 


Create new shaders and textures that your plane uses. 
Notice that we are using shaderlist[1] and shaderlist[2] 
to affect both sides of the plane. If you just use shader 
as opposed to shaderlist[ ] you only affect one side of 
the plane. 


ourshader=member(2).newShader(“ graphic1" ,#standard) 
textr=member(2).newTexture(" graphic1” ,#fromCastMemb 
er,member(“graphic1")) 

ourshader.texture=textr 

ourplane.shaderlist[1]=ourshader 


ourshader2=member(2).newShader(“graphic2” ,#standard) 
textr2=member(2).newTexture(“graphic2",#fromCastMem 
ber, member(“graphic2")) 

ourshader2.texture=textr2 
ourplane.shaderlist[2]=ourshader2 


Step 7: Specify the RGB values of the ambient light that the 
plane sides will reflect. 


Step 8: Set the camera position. > 


Web Special 


alts 


Web Special 


6: Cylinder primitives 


How to create an open-ended cylinder primitive 


We've used textures and shaders to affect four sides — the fifth is 
missing because it's an open-ended cylinder. 


Step 1: Create an empty 3D world. 


Step 2: Create a cylinder model resource and specify all 
its properties: 


acylinder=member(2).newModelResource(“acylinder”, 
#cylinder, #both) 


acylinder.bottomRadius=5 


acylinder.topRadius=5 
acylinder.height=25 
acylinder.topCap=False (it will be an open-ended cylinder) 


Step 3: Create a new model that uses the #cylinder 
model resource: 


ourcylinder=member(2).newModel(“ourcylinder”, 
acylinder) 


Step 4: Create an ambient light. 
Step 5: Specify the RGB values of the ambient light. 


Step 6: Make sure that you have four castmembers with 
some images and name them ‘graphic!’, ‘graphic2’, 
‘graphic3’ and ‘graphic4’. Create new shaders and textures 
that your cylinder uses — notice that we are using 
shaderlist[1],.. shaderlist[4] to affect all sides of the cylinder, 
inside and outside. We only need four because one side will 
be missing since it is an open-ended cylinder. If you just use 
shader as opposed to shaderlist[ ] you only affect one side 
of the cylinder: 


ourshader=member(2).newShader(“graphic1”,#standard) 
textr=member(2).newTexture(“graphic1" ,#fromCastMemb 


7: Altering the box primitive 


How to scale, rotate and translate the textures on the sides of the box primitive 


Step 1: Create an empty 3D world. 
Before you start generating a box, declare a couple of 
variables that you can reuse in other handlers: 


global incr, count 


Step 2: Create a box model resource and specify all 
its properties. 


Step 3: Create a new model that uses the #box 
model resource. 


Step 4: Create an ambient light. 
Step 5: Specify the RGB values of the ambient light. 


Step 6: Make sure that you have six castmembers with 
some images and name them ‘red’, ‘blue’, ‘yellow’, ‘green’, 
‘purple’ and ‘aqua’. Use these castmembers to create new 
shaders and textures that your box uses. 


Step 7: Specify the RGB values of the ambient light the box 
faces will reflect. 


Step 8: Set the camera position. 


Step 9: Scale textures smaller(to scale them bigger you 
would use vector(1,0.5,2) for example) 


member(1).model(1).shaderlist[1].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 
member(1).model(1).shaderlist[2].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 
member(1).model(1).shaderlist[3].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 
member(1).model(1).shaderlist[4].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 


member(1).model(1).shaderlist[5].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 
member(1).model(1).shaderlist[6].textureTransform.scale = 
vector(0.5 ,0.2, 1.0) 


Step 10: Rotate textures on every side of the box: 


member(1).model(1).shaderlist[1].textureTransform.rotatio 
n= vector(0.0,0,45.0) 
member(1).model(1).shaderlist[2].textureTransform.rotatio 
n= vector(0.0,0,45.0) 
member(1).model(1).shaderlist[3].textureTransform.rotatio 
n = vector(0.0,0,45.0) 
member(1).model(1).shaderlist[4].textureTransform.rotatio 
n = vector(0.0,0,45.0) 
member(1).model(1).shaderlist[5].textureTransform.rotatio 
n= vector(0.0,0,45.0) 
member(1).model(1).shaderlist[6].textureTransform.rotatio 
n= vector(0.0,0,45.0) 


Step 11: Set couple of parameters that will be used later to 
animate textures on all sides of the box: 


incr = 0.01 
count = 0 


Step 12: Rotate your box and animate textures on every 
side of it. Create the following script and attach it to your 
3D sprite: 

on exitframe 

* rotate the model: 


ourbox.rotate( 1.0, 1, 0.1) 


* translate textures on all sides of the box by the incr value: 


er,member(“graphic1")) 
ourshader.texture=textr 
ourcylinder.shaderlist[1]=ourshader 


ourshader2=member(2).newShader(”graphic2" ,#standard) 
textr2=member(2).newTexture(“graphic2” #fromCastMem 
ber,member(“graphic2")) 

ourshader2.texture=textr2 
ourcylinder.shaderlist[2]=ourshader2 


ourshader3=member(2).newShader(“ graphic3”,#standard) 
textr3=member(2).newTexture(“graphic3" ,#fromCastMem 
ber,member(“graphic3")) 

ourshader3.texture=textr3 
ourcylinder.shaderlist[3]=ourshader3 


ourshader4=member(2).newShader(“graphic4” ,#standard) 
textr4=member(2).newTexture(“grahic4",#fromCastMemb 
er,member(“graphic4")) 

ourshader4.texture=textr4 
ourcylinder.shaderlist[4]=ourshader4 


Step 7: Specify the RGB values of the ambient light that the 
cylinder sides will reflect. 


Step 8: Set the camera position. 


First scale textures smaller, then rotate and animate textures 
on every side of the box: finally, translate textures on every 
side using the incr value. 


member(1).model(1).shaderlist[1].textureTransform.translat 
e( 0, incr, 0) 
member(1).model(1).shaderlist[2].textureTransform.translat 
e( 0, incr, 0) 
member(1).model(1).shaderlist[3].textureTransform.translat 
e( 0, incr, 0) 
member(1).model(1).shaderlist[4].textureTransform.translat 
e( 0,incr, 0) 
member(1).model(1).shaderlist[5].textureTransform.translat 
e( 0,incr, 0) 
member(1).model(1).shaderlist[6].textureTransform.translat 
e( 0,incr, 0) 


count = count + 1 
if count = 90 then 
count = 0 
incr = 0 - incr 
end if 
end 


8: Reflection maps 


How to create a reflection map from another castmember and apply it to the box primitive 


Create a reflection map from an image that you have in the 
castmember named ‘reflection’ and apply it to every side of the 
box using the code opposite. 


Step 1: Create an empty 3D world. 


Step 2: Create a box model resource and specify all 
its properties. 


Step 3: Create a new model that uses the #box 
model resource. 


Step 4: Create an ambient light. 

Step 5: Specify the RGB values of the ambient light. 
Step 6: Make sure that you have six castmembers with 
some images and name them ‘red’, ‘blue’, ‘yellow’, ‘green’, 


‘purple’ and ‘aqua’. Use these castmembers to create new 
shaders and textures that your box uses. 


Step 7: Specify the RGB values of the ambient light the box 
faces will reflect. 


Step 8: Set the camera position. 


Step 9: Create a reflection map from an image that you 
have in the castmember named ‘reflection’ and apply it to 
every side of the box: 


ref=member(1).newTexture(“refl” &string(the milliseconds), 
#fromCastMember, member(“reflection")) 
member(1).model(1).shaderlist.reflectionmap=ref 


9: Particle Systems primitives 


How to create a Particle Systems primitive that uses an image with alpha transparency as its texture 


Step 1: Create an empty 3D world. 


Step 2: Create a particle model resource and specify all of 
its properties: 


aparticle=member(1).newModelResource(“aparticle”, 
#particle) 


Step 3: Create a texture that your particle model resource 
is using. We are generating it from a graphic that was 
created in Fireworks, has an alpha transparency and seats in 
the castmember named ‘colorstar’: 


t=member(1).newTexture(“alphatxt", #fromCastMember, 
member(“colorstar”)) 


«The next Lingo command means that the red, blue, green, 
and alpha components of the texture are each drawn using 
eight bits of information: 


t.renderformat=#rgba8888 


Step 4: Specify the #particle model resource properties: 


aparticle.texture=t 

aparticle.lifetime=1500 
aparticle.blendrange.start=100 
aparticle.blendrange.end=1 
aparticle.emitter.angle=10 
aparticle.emitter.maxspeed=100 
aparticle.emitter.minspeed=1 
aparticle.emitter.mode=#burst (there can be different 
emitter.mode properties: #burst and #stream) 


Step 5: Create a new model that uses #particle 
model resource: 


myparticlemodel=member(1).newModel(“part", aparticle) 
Step 6: Create an ambient light. 


Step 7: Specify the RGB values of the ambient light. 


We've generated our particle model resource from a graphic that 
was created in Fireworks: it has an alpha transparency channel. 
Experiment with the settings yourself. 


Step 8: Translate the camera the way you want it to point at 
the particle model: 
sprite(me.spritenum).camera.translate(0,0,-200) 


10: Spinning logos 


How to create a spinning logo using 3D text 


Rotate and Pan Cameras, and edit various other boxes before 
clicking the Set Camera Transform button. 


Step 1: Select the Text tool from the Tool palette and type 
some text on the stage. 


Step 2: Make sure that your text member is selected on the 
stage, open up the Property Inspector window and select a 
Text tab. 


Step 3: There are two dropdown lists: Display and Framing. 
In Display dropdown select 3D Mode and in the Framing 
dropdown, select Fixed so that you can change the size of a 
text member. Change the size of your text member so that it 
is easily visible and you can read what it says. 


Step 4: In the toolbar, find the Shockwave 3D Window 
button and click on it to open that window. Make sure that 
the size of your text member is the same in Shockwave 3D 
window and on the stage. 


Step 5: Now you have to edit your 3D text in the Shockwave 


3D Window. There are three main buttons: Dolly Camera — 
to zoom in/out; Rotate Camera — to rotate your 3D text; Pan 
Camera — to move your 3D text. Now you have to edit light, 
smoothness, tunnel depth, and so on. Open up the Property 
Inspector window and click on the 3D Extruder tab. Now edit 
Smoothness, Tunnel Depth, Bevel Edge and Amount, select 
Director Light, and choose colors forthe Ambient, 
Directional, Background, Diffuse and Specular lights. 


Step 6: After you are satisfied with the Look of your 3D text, 
click the Set Camera Transform button in the Shockwave 
3D window to reflect all the changes on the stage. 


Step 7: Now you have to rotate your 3D text around the 
Y-axis. Open up the Library palette, select 3D/Actions 
and choose Automatic Model Rotation behavior. Drag 
that Behaviour onto your 3D-text sprite and in the 
Behavior pop-up window, select to rotate around Y-axis. 
Play your movie. FEES 
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Files on disc 

The tutorial files and and all the code 
referred to in the tutorial are on the 
cover CD in the Dual\Tutorial\ 
Scrolling folder. Flash 5for PC/Mac 
costs £259, for more info at 

[w] www.macromedia.com. 


Scrollable cropped 
maps in Flash 5 


Make a scrolling map in Flash that won't scroll out 
of view, and learn a great scrolling engine technique 


af ost business Websites include a 
} location map to help visitors 
fad locate the company offices. 

\ This tutorial shows how you can 
build an interactive map in Flash that enables 
users to see the location in a wider context, 
then zoom in to see more information at a 
local level. 

The basis of the technique is a combination 
of using masks in Flash, so that the zoomed 
map stays cropped within its area on the page, 
and altering the built-in scale and position 


properties of movie clips. However, while it's 
easy to construct the basic version, there are 
lots of problems with it. 

To fix these, we'll see how to prevent the 
map becoming too big or too small, how to 
re-centre the map so that you can't lose it 
when reducing the zoom level, and how to 
make the map scroll smoothly so that the user 
doesn't have to click like one demented. 
We've assumed that you are familiar with the 
fundamentals, including working in layers and 
applying basic actions. > 
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Part 1: Zooming, resizing and scrolling 


We'll begin by creating a new movie in Flash and importing 
files from the cover CD 


Entering 
ActionScript 


When entering code, it's best to 
enter it in expert mode once you 
have a general idea of what 
you're doing because it's much 
faster. Flash highlights keywords 
as you type and checks the code 
for syntax errors (Ctrl-T or 
Command-T), You can format the 
code pretty much how you like, 
using spaces, tabs and carriage 
returns to lay it out neatly. 


Using functions 


Functions enable you to create 
re-usable chunks of code, 
which makes it easier for other 
people to follow what you have 
done and helps you to manage 
any changes that you need to 
make. If you need to supply a 
unique value to a function when 
it's used, include the value inside 
the parentheses: for example, 
scroll(2) passes the number 2 to 
the scale function where it's 
known internally as ‘var’ 


int To begin with, create a new movie in Flash. hz Choose File>Open as Library, and browse to 
the tutorial files on the CD. Select the file 

assets. fla, and choose Open. The Library palette 

contains the items needed to complete the tutorial. 


Choose Modify>Movie, and set the stage 
width to 700 pixels and the stage height to 500 
pixels. Choose OK to return to the movie. 


Set the mask layer to be a mask by 
right-clicking on the name of the layer (Ctrl- 
clicking on the Mac) and choosing Mask from the 
pop-up. The mask and map layers become locked. 


4 | Create a new layer, and name it mask. Drag an 
instance of the mask symbol from the library 
window onto the stage and position its centre at 
x:350, y:250. 


8 ——— 


7 | Create a new layer and name it interface. Drag 


a 


the box symbol from the library to the stage, 8 | Drag the plus and minus button symbols from 


and position its centre at x:350, y:250. This creates 


the library to the stage on the interface layer 
an outline around the visible area of the mask. 


and position them where you wish. 


Drag the map symbol onto the stage, and 

rename the layer to map. Select the map 
instance on the stage and position its centre at 
x:350, y:250. Using the Instance palette, name the 
instance map. 


G Hide the mask layer by clicking the bullet in the 
eye column beside its name in the Layers 
palette, and unlock the map layer by clicking the 
padlock icon beside its name. 


9 | Select the map instance and open the Actions 
palette using Ctrl-Alt-A (Command-Option-A 
on the Mac). Open the Actions palette pop-up 
menu by clicking the arrow at the top right, and 
choose expert mode. 


Simulating 
scrollbars 


It's tempting to experiment with 
new interface ideas when you're 
designing in Flash, but bear in 
mind that this can make your 


project hard to use and may 

irritate users. Scrolling using ore} pi vent Ges ae { 

mouse hovering is a typical thi Big noni! - Ee ospeealé} 

example: hovering never changes this._yscale = mapScale; 

state anywhere else on the } e . 
computer, so why use hovering to function resetPositionO { if € _root.map.mapScale < 400) { 
scroll in Flash? It's best to avoid Hi : ne a 3} afoot aps sealete) 


} 
this, and use on(press) instead. } 

mapScale = 100. 

: resetPositionO: 
Frame actions vs 


Object actions 

Flash makes it easy to apply Select the plus button and enter the code 

actions to keyframes shown in expert mode. This scales the map 

accidentally, when you really Enter the code shown. This initialises a using the built-in _xscale and _yscale properties of 

sree bral tari worriedhing variable, mapScale, which contains the size of | the movie clip, but there's no code to limit the 

onthe stage. This la one of the the map movie clip, and defines two functions: scaling. Press Ctrl-Enter (Command-Enter on the To prevent the map becoming too large, 
AcatCoraronesneen ee resetPosition() and scale(). These centre and resize Mac) to open the Test Movie window where you amend the code for the plus button using the 
prOblaiy lalig ABGROSAER Be the map using a supplied magnification value. can try the button. If... statement shown. 

sure to click on the object or 

keyframe you want to add code 

to before entering text into the 

ActionScript window. 

Code on the CD 


The code referred to here is in 
the code.txt file in the Scrolling 
folder on the cover CD. 


. gas 
Waterman >t 


Copy/paste the code from the plus button to 
the minus button, then change the ‘< 400' to 


13 Try the amended code using Test Movie. The ‘>100' and change the value passed to Test the map again. It should now resize to one 
map should zoom twice, then stop enlarging. _root.map.scale() to 0.5 of only three sizes. 


CC ont map mapSeale == 200 866 root map.» > 759) C 
Oot maps -m 25 5 


Drag the arrow button symbol from the library Test the map: you'll find that it moves to the @ We'll stop the map moving if it isn't cropped, 
16 to the stage on the interface layer, and position left, and continues out of view. We need to and limit the distance it can travel depending 
it to the right of the map. Enter the actions shown in _ limit the movement of the map, and preventit from —_ on the zoom level. To do this, amend the code for 
expert mode. scrolling if it's at normal size. the right arrow as shown. > 
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Part 1: Scrolling continued... 


‘Greying out’ 
interface elements 


Scroll bar buttons shouldn't look 
live when there isn't anywhere to 
scroll to; this is the Flash 
equivalent of using blue 
underlined text on a Web page. 
It's important to grey them out or 
to remove them altogether if 
scrolling isn't going to work at 
that moment. 


Web Special 


Test the map, and check that it scrolls only at 
19] the middle size. It should stop scrolling at the 
right edge of the map. 


With the new instance still selected on the 

stage, press F8 again and save it as another 
movie clip called scroller. Double-click the scroller 
instance to enter edit symbol mode. Check that you 
are editing the scroller symbol. 


ress) 
me Coen? ( 


esis Ercot terete) t 
} gotoandstopQ) 5 


25 Amend the code for the arrow button as 
shown — this moves the timeline of the scroller 
clip to the frame where the engine clip loads and 
scrolls the map as it runs. Test the map at the middle 
zoom level again, pressing the button to scroll. 


VCS a | 


i (Croot ano case tgale gm $90)! Croot-mapsmapseate = 200), 


20 We need to stop the map moving out of view 
when the zoom level is reduced. Amend the 
code for the minus button as shown, so that the 
map is re-centered when the zoom level is reduced. 
Make sure to use double ‘=' signs where required. 


In the timeline of the scroller symbol, drag the 

keyframe to frame 10. Select the instance of 
engine that’s on the keyframe at F10 and enter the 
code shown in expert mode. Put a stop action on 
frame 1 of the scroller. 


width of map at 4x magnification: $70 x 4 = 2200 
= 205 
Map can move lef defore revealing white space beyond edge: 
‘1140 285 = 855 
‘Mtarting povition of map centre: 390 


Maximum allowable x position of map: 380 « 885 = -S0S 
‘round up to nearest multiple of seroll distance (25); «800 


To make the map scroll but stay in view at the 

largest size (400 per cent) we need to use a 
separate If... statement which uses a different 
limiting value. The method used to calculate the 
limits is shown above. 


Now, we'll make the scroll continuous, so that 

the user doesn't have to click repeatedly. Draw 
a small box on the stage, select it and press F8 to 
convert it to a symbol. Name it engine and ensure 
that its behaviour is movie clip. 


Return to the stage, exiting Symbol Editing 
view. Select the instance of the scroller symbol 
and name it scroller using the Instance panel. 


11 (Crossan map iggt me 400006 sorts » 9400.99 
’ 


Sea 


Amend the engine clip code on F10 of the 
scroller as shown, then test the scrolling at 
both the magnified views. 


Object properties 
Flash provides many built-in 
object properties, such as the 
position, size, scale and visibility 
properties that are used in 

this example. The Flash 
documentation includes many 
built-in properties and functions 
that can be useful, so make some 
time to browse through these and 
take note of ones you didn't know 
about for future use. 


scroller) 
a top QO) 5 


| matt Seer? « 


We now need to duplicate the arrow button, 

rotate it, and use it to scroll in the other 
directions. Copy/paste the arrow button and 
position it on the left side of the map. Alter the 
button code so that on press it moves the scroller to 
frame 20. 


: $53 om 200 JUKE rovtnaps » 82D 
11 ret map nsegte me 400 2466 rootamnp. s+ “BED 
yo etamigs? 5 


Copy/paste the arrow button, rotate it to 

point down, and position it on the bottom 
edge of the map. Alter the button code so that it 
tells the scroller to go to frame 40. Insert a new 
keyframe into the scroller at frame 40, select the 
engine instance and amend the code as shown. 


if Ke root map .mapScale < 400) { 
root .map. scale 


if Croot.map.mapScale == 100) 


—root.arrows. visible = 24, 
Jd else { 


root. arrows. visible = trues 


} 


EV] Edit the plus button and add this code: 


if (_root.map.mapScale == 100) { 
_toot.arrows._visible = false; 
yelse { 
_toot.arrows._visible = true; 
} 


‘4 CC root nap ane Seale am 400 I46C root maps. « 778 9) £ 


Copy/paste the arrow button, rotate it to point 
up, and position it on the top edge of the map. 


Open up the scroller symbol. Insert a new Alter the button code so that it tells the scroller to 

keyframe into the scroller timeline at frame 20, _go to frame 30. Insert a new keyframe into the 
select the engine instance on the new frame, and scroller at frame 30, select the engine instance and 
alter its code as shown. amend the code as shown. 


function resetPosition: 
hiss m 3505 oie 
hissy me 2805 


) 
mapScale = 100; 
PesetPoritionOy 


root. arrows. vitible = false 


32 We now need to hide the buttons when the Name the instance arrows in the Instance 


map is at normal size. Select all four arrow panel. Select the map instance and enter this 
buttons, press F8 to convert to symbol, ensure it's code inside the onClipEvent(load) statement: 
set to movie clip and name the symbol arrows. _toot.arrows._visible = false 


wf Crook nn anpseste, - 209), C 


ai Tarrows, oo tstble m falsey 
“ie 
Poot. arroms. «i rible = truss 


Add the same code before the end of the 


on(release) statement in the minus button. Edit Test the scrolling map by pressing F12 — it 
the symbol engine, and delete the box from inside should scroll by pressing one of the four arrows 
it. This means that the scroller and engine are now which only appear if the map is magnified, and the 
totally invisible. area beyond the map edge shouldn't appear. EEE 
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[Books] 


Up-to-date reference 


Web Design Tools and Techniques — 2nd Edition 


resented in full-colour, this 
second edition greatly 
expands on its earlier 
incarnation, covering new 
develonnuets such as Flashand XML. 
What makes this book stand out from 
the rest is its method of teaching. 
What is available over three 
self-contained sections is a detailed 
course in Website design. The book 
begins with the presentation of ten 
excellent rules for Website design, then 
looks closely at the use of frames and 
metatags. It then discusses how to use 
design tools such as image maps to 


build the essential elements of a 
successful Website. 

The concluding section enables you 
to see how advanced techniques and 
technology can be used to enhance 
your Website and provide your visitors 
with a more rewarding experience. This 
manual is up-to-date enough to cover 
WAP design with XML and WML and 
WebTV. Not a hands-on tutorial as 
such, but more of a well-designed 
reference work that any novice can 
learn from, its strength is in the fact that 
the author relates each section to a 
real-world example. This might be a 


Website or screenshots from 
a software package. You won't be an 
expert when you complete this book, 
but you will come away with a thorough 
knowledge of the most important HTML 
tags you need to understand if your next 
project is to succeed. 


Verdict 
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Improving workflow 


Fireworks 4 Expert Edge 


[ Authors 


Jeffrey Bardzell and 
Lisa Lopuck 


[ Publisher _ 


Osborne 
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his book certainly isn't for 
( beginners. The authors 
deconstruct a complex 
Website, moving through 
each element of its design and 
illustrating how Fireworks 4was used 
to create the overall look. You not only 
learn Fireworks technique, but also 
how to improve your workflow and how 
to handle the design process as a 
group project within your own team. 
The latest Fireworks tools are 
discussed such as JPEG compression 
and batch processing, all within the 
hands-on environment of the real- 
world Website that evolves as new 
skills are introduced. Overall, this is a 
good book for the intermediate user 
who needs guidance on how to 
integrate Fireworks elements into their 
designs and how these can coexist with 
items drawn from other programs. 


Verdict 


SEDC 


Perfect introduction 


Dreamweaver 4 Hands-On Training 


[Price 7 
£29.99 
| Authors 
Lynda Weinman and ij 
Caro Green 


| Publisher ay 
Peachpit Press 


ISBN 


= 


0201741334 


ynda Weinman has a 
reputation for producing 
some of the most useful 
books about Web design. 
rare she develops the Hands-On 
series, distilling one of her highly 
desirable training classes into a book. 

Beginning with an overview of 
HTML and how a Website is defined — 
a discussion often omitted from many 
manuals — the book then covers 
typography, tables, and frames as well 
as more advanced techniques such as 
cascading style sheets and behaviours. 

Cleanly laid-out pages supported 
with excellent screenshots teach each 
technique as if you were in a training 
class. The CD-ROM that accompanies 
this book contains QuickTime movies 
that demonstrate in real-time how to 
complete some of Dreamweaver's 
more complex tasks. 


Verdict 


SII 


eBook development 


Electronic Books and ePublishing 


[ Price | 


£19.50 


[ Author 


Harold Henke 


Publisher 


his book is subtitled ‘a 
practical guide for authors’. 
If you are expecting a manual 
that shows you how to 
produce your own ebook then you'll 
be disappointed. 
What is presented is a well- 
researched and written overview of the 


Springer-Verlag current state of ebook development 
from a man who has in many ways 
shaped that development. 
1852334355 Divided into two sections, the first 


covers the design of the electronic 
book and presents the case that the 
printed book has evolved to become 
the perfect medium for conveying 
information: something we should try 
and emulate with the ebook. The author 
then discusses the history of the ebook 


to date, and moves on to look at ebook 
usability, with the concluding chapter in 
section one asking the question: what 
should an ebook look like? 

Section two covers epublishing and 
looks at metadata and its importance 
forthe development of ebooks. 

Chapter six is of particular 
importance because it covers the topic 
of digital rights management that has to 
be in place if ebooks are to have 
successful commercial future. 

The problem with this book is that 
anyone who expects tutorials on how to 
produce an ebook won't find what they 
are looking for. 

Real practical advice doesn't appear 
until the third appendix. However, if 
you’re after an overview of this 


industry's development, then this 
book should serve you well. But as a 
practical guide it fails to live up to its 
title’s promise. 


Verdict 


SK 


True colours 


Color Harmony for the Web 


[Stee aeeegae 


colour scheme can make 


£22.50 or break your Website. 
This manual offers some 
fi timely advice on how colour 
Cailin Boyle can influence your audience and 
how they're likely to react to your 
Publisher Website, as well as more practical 
— considerations such as which colour 
Rockport schemes work together. 
a... oe Presented in full-colour throughout, 
this is an excellent primer in the art of 
1564966038 colour design as wellas a reference 


work. Suggested colour schemes 
come under categories such as 
nostalgia or hi-tech. 

In each case, you're presented 
with a Website that incorporates the 
colour scheme under discussion, 
enabling you to see how well the 
colours do or don't work together. 

With more than 800 unique colour 
schemes to choose from, designers 
can instantly choose a number to 
experiment with until they have found 
the right one for their design. With a 
colour matching and conversion chart 
also included, this manual is an 
essential reference tool. 


Verdict 


SSIES 


Effortless design 


Designing Web Usability: The Practice of Simplicity 


Price 
£34.99 


Author 
Jakob Nielsen 


Publisher 
New Riders 


ISBN 
156205810X 


he Chicago Tribune once 

stated that, ‘Jakob Nielsen 

knows more about what 

makes Websites work than 
anyone else on the planet.’ 

This book isn't a hands-on tutorial 
of Web design, it’s a distillation 
of Nielsen's experiences in the 
online environment and the best ways 
to apply this knowledge to your 
own work. 

Nielsen's basic tenet is that your 
Website should be usable above all 
else. He covers the fundamental 
design considerations such as page 
design, content design and Intranet 
design, in an anecdotal style that 
makes learning effortless. 

Refreshingly frank, if Nielsen 
thinks an innovation is a waste of time, 
he says so. For instance, if you think 
your site needs to use frames or 
Flash, Nielsen may well convince 
you otherwise. 

Quite simply, this is a book that 
should be read by anyone designing an 
online information source. Your site will 
be the better for it. > 


Verdict 


CESESLS 
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Academic overview 


The Internet and Art: A Guidebook for Artists 


[ Author 
Barbara Houghton 


Publisher 
Pearson Education 


1 aR eat 


0130893749 


( f you are an artist with little 
’ 


experience with Web design, 


this book offers an overview 
J of the essential skills 

needed to showcase your art online. 
The vast majority of this book covers 
Web design using LiveMotion with a 
nod to Photoshop. What's missing is 
the specialist advice that the book 

initially promises but fails to deliver. 

The main thrust of this essentially 
academic overview of the tools and 
skills involved in building a competent 
site is discussion, rather than tutorials. 
The last chapter is perhaps the most 
useful because it offers real-world 
examples with site addresses. 

As an aid to planning a Website 
building strategy, the book may teach 
you a thing or two. But on the whole 
artists should look elsewhere for a 
more practical guide to getting their 
art on the Web. 


Verdict 


SKK 


Cross-compatibility 


Effective Web Design — 2nd Edition 


£29.99 


Ann Navarro 


Publisher 


Sybex 


ISBN 


0782128491 


f you're a competent 
HTML programmer looking 
f j / to take a step up into the 

i world of XHTML on your way 
to fully understanding XML, this book 
provides a thorough grounding in 
XHTML technique. 

The author proposes what she calls 
the cross-compatibility concept, in 
other words, she advocates that a 
designer should concentrate solely on 
producing accurate code. If an older 
browser is unable to display it, the 
result is ‘graceful degradation or else 
the browser wont be able to display the 
contents at all. 

Web designers who want to 
manipulate their page’s code more 
accurately than is possible with a GUI 
layout program will find this book a 
refreshing change. Its presentation is 
easy to digest and there are plenty of 
worked examples. 


Verdict 


SDI 


Full-motion video 


Multimedia Internet Broadcasting 


[Authors 
Andy Sloane and 
Dave Lawrence 


Publisher a3} 


—b 


Springer-Verlag 


[ISBN es ae gi 


1852332832 
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he use of streaming 
( full-motion video is still in 
its infancy. If you are 
j attempting to make the most 
of this technology, this book illustrates 
some of the key issues. 

This is the first book of its kind and 
assimilates a wide variety of research. 
There are 11 key essays: the first three 
look closely at multimedia Internet 
broadcasting. The next two chapters 
cover how to build an infrastructure 
which enables events to be broadcast 
mostly with the use of the ISABEL 
application. The third section looks 
into the future and discusses how the 
Internet may change to accommodate 
this kind of media. Read it to find out 
all the information you need to know 
about how, when and why to support 
multimedia Internet broadcasting. 


Verdict 


SIE 


Getting a head start 


Web Design Workshop 


£29.99 


Robin Williams, John 
Tollett and David Rohr 


Publisher 


Peachpit Press 


ISBN 


0201748673 


( ood Website design 


demands the use of a 

diverse set of skills, from 

aesthetics to programming. 
This title attempts to show the reader 
the ideal skill set a designer should 
have as wellas offering some 
comprehensive advice. 

Lavishly illustrated throughout, each 
key design skill is explained fully and 
supported with illustrations. This isn't 
the usual how-to manual: you won't 
find chapters on preparing images for 
the Web with Photoshop, for instance. 
What you will find are concise chapters 
that enable novice designers to avoid 
many of the pitfalls that befall 
beginners. Read from cover to cover, it 
offers a comprehensive understanding 
of the issues involved in planning and 
building a new Website. GEES 


Verdict 


SSI 


Computer Arts Animation 
Special — COSB0019 

Eight new tutorials include: creating 
a walk cycle in Maya; bring your 
objects to life in Flash; how to show 
emotion in Character Studio; 
combining 3D objects and video 
footage in After Effects; animate 
our free gremlin model in Poser and 
build atmospheric scenes. 

We find out how Passion Pictures 
created the Robbie Williams 
character for his latest video and 
look at the CG division at Aardman. 
CD A Taste of Maya, Poser 4, Flash 
5, Cinema 4D XL 6.1, Retas Pro, 
2.5d Animation Stand and more. 


Issue 57 — Code CAO57 
Colour correcting photography 
CD Double CD issue! Exclusive 
demo of 3ds max 4. 


take out a subscrip 


compute: & 
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Computer Arts 

Special — COSB0020 

Eight stunning tutorials written by 
leading Photoshop artists: recreate 
the surreal cover image; create flat 
vector shapes without using 
FreeHand or Illustrator, build an 
image gradually using layers; make 
a convincing old screen print effect 
for an illustration; create a focal 
point; and discover the art of 
promotion. Master the art of colour 
management and a look at the 
future of typography. 

CD 366 free Photoshop filters and 
extras, and 27 demos including 
Photoshop 6. 


Issue 58 — Code CA0OS8 
100 ways to better Websites 
CD Merlin 3D, Cinema 4D Art, 
Amapi 3D 4.15. 


Computer Arts Dreamweaver 
Special — COSB0021 

We guide you through Dreamweaver 
4 and UltraDev with nine new 
tutorials and techniques, including: 
setting the configuration; HTML 
layout and page design; creating 
libraries in UltraDev and site 
management. We’ve also compiled 
155 Dreamweaver solutions: fixes 
for browser bugs; Q&A answered by 
the experts; and tips and shortcuts 
for UltraDev. Plus Matinée and 
Random Media. 

CD 28 Extensions, Dreamweaver 
4, UltraDev, Flash 5, Generator for 
Flash, Netscape 6 and Fireworks 4. 


Issue 59 — Code CA059 
Exclusive Cinema 4D CXL 7 demo 
with expert tutorial 

CD Cinema 4D XL 7, D Sculptor. 


Computer Arts Flash Special — 
COSB0022 

Tutorials on a host of Flashrelated 
topics, including: the designer's 
guide to XML; creating and editing 
sound clips, using a Flash 5 
scripting engine; rotational 
navigation; and how to set up a 
Generator server and add dynamic 
Flash content. Make your Flash life 
easier with a complete ActionScript 
reference and expert tips from 
Macromedia. We also profile rom 
and son, Broad Snout and Pesky. 
CD Demos of Flash 5, Director 8.5, 
Generator, FreeHand 10, 

Flash Typer, and 70+ source files. 


Issue 60 — Code CA060 

Web video effects 

CD After Effects 5 demo and the 
full version of Amorphium 1.0. 


t of the world 


Computer Arts Photoshop 
Special — COSB0023 

We cover a whole range of 
Photoshop techniques from 
creating chrome and metal textures 
to blending using layer modes, 
cleaning scans, and optimising 
graphics for the Web. We also take 
a look at accurate skin matching in 
composite images and Magictorch 
explains how to give abstract 3D an 
extra twist. Plus, reviews of the 
best plug-ins, expert ImageReady 
tips, profiles and more. 

CD Demos of Photoshop 6, 
Cinema 4D XL 7, 70 plug-ins - 36 
for Mac, 34 for PC. 


Issue 61 — Code CA0G1 

Pixel art: all angles explored 

CD Expression 2 LE, IconBuilder 
Pro 3, Premiere 6 demo. 


+44 (0)1458 271108 


ion — see page 29 
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DEFINITIVE NEWS, REVIEWS AND FEATURES 


BRIG#i 
IDEAS 


EXPERT TIPS FOR POWER USERS 


Work smarter with our tricks of the trade 
on everything from design to databases 


THE STATE OF BRUADEAND 


Are we getting a fair deal? 


HOW TO... 


= Create a top-brand logo 

= Program with basic AppleScript 

= Build your own online database 

~ Use Bryce 5 with our EXCLUSIVE demo and tutorial —_ . 


PLUS: 


nn 
on sale NOW! -~ 
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[Web Design] 


Whether you're designing your first page or complex Flash animations, our indispensable 
guide to design resources on the Web will point you in the right direction... 


Tutorials/resources 


Computer Arts Forum 


[w] www.computerarts.co.uk/forum 

Log onto the Computer Arts forum for advice on 

all things Web. Pick up tips on Dreamweaver, Flash or 
any other package from the bustling community, ask 
the Computer Arts team a question or simply look 
around and enjoy the friendly graphics banter. 

There's also info on this year's Computer Arts LIVE/O1 
show in October. 


Computer Arts Web Studio 


[w] www.computerarts.co.uk/web 

Not content with having an abundance of Web design 
tips, tutorials and techniques, here at Computer Arts 
we've gone and redesigned our huge site again. 
Whether you're a Web guru searching for that elusive 
tip ora first-timer wondering where to start, this is the 
place for you. 


Corel Designer.com 


[w] www.designer.com 

This is Corel’s answer to Creative Pro. It is hosted with 
the intention of assisting and inspiring Corel product 
users, although much of the advice can be adapted to 
other programs. Now that Corel has acquired Bryce, 
KPTand Painter, this site is very much a rival to 
Adobe.com in terms of value. 
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The Computer Arts Web Studio at [w] www.computerarts. 


co.uk/Web, holds a plethora of expert tips, tutorials and advice. 


You'll also find a gaggle of free downloads. 


Flash Kit 


[w] www.flashkit.com 

Let's face it, Flash is awesome, but it can also be a pain 
in the neck. If your ActionScript is acting up, or your 
tweening is tumbling, Flash Kit is the ideal site. You 
won't find a more comprehensive, Flash resource on 
the Web. Chock full of downloads, tutorials and news. 
If you use Flash, then you need to go here. 


Macromedia Exchange 


[w] www.macromedia.com/exchange 

The Macromedia Exchange is the perfect place to 
boost your toolset and get hold of Dreamweaver 
objects, Flash movies and UltraDev extensions. Sign 
up, and then take advantage of what a truly thriving 
Web-based community has to offer. 


The Java Centre 


[w] www.java.co.uk 

Java is not the easiest of scripting languages - one 
error in the syntax and it could all go horribly wrong. 
For some expert tips and advice on how to make your 
code shine, orto perhaps pick up some nifty applets, 
take a trip to this comprehensive resource. 


Training Tools 

[w] www.trainingtools.com 

If it’s free online training in Flash, Dreamweaver and 
the like that you want, then Training Tools is a great 


wens: 
Macromedia Bitesnring Now Avaliable 


Macromedia Unveils Authorware @ 
Rewister For Maoramecia War World 
Macromedia Training Available for all Ghill Lovee 


ERATE Kdvoater Seivions Seminar 
TE OF THE DAY ~ Advernurn Zone Network 


Flash 5and Dreamweaver 4 are just a couple of Macromedia's 
excellent Web authoring products. Take a trip to the 
Macromedia Exchange where you can finds heaps of add-ons 
and extras, all freely downloadable. 


place to come. Presented in simple, and clearly 
illustrated steps, the content here will teach you 
everything from designing your first page to complex 
Flash animations. Sign up for more in-depth tutorials. 


Webmonkey 


[w] www.webmonkey.com 

Webmonkey is a resource that each and every Web 
designer and coder should visit at least once. Reams of 
tutorials, excellent advice and worthwhile downloads 
make fora terrific site. Shame about the latest design 
though - doesn't quite live up to the content. 


Web Reference 


[w] www.webreference.com 

There are so many facets to designing a Website, 
including psychology, marketing, design, 
programming, funding, new technologies and security. 
This extensive site hosts FAQs, professionally-written 
articles, design tips, downloads, resources, 
programming advice and lots more. 


Software companies 


Adobe 

[w] www.adobe.com 

The homepage of Adobe offers a lot more than just a 
look at the company’s vast range of products. You'll > 


The recenty redesigned Adobe Website is laden with product 
info. More importantly, the tutorials section of the site offers 
some truly professional and thoroughly enlightening advice. 
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We're not sure about the new design, but nevertheless, the 
Webmonkey’s resource at [w] www.webmonkey.com has tips 
and tutorials on everything from ASP to SWF. 


find tips, tutorials and user forums here, all of which 
can aid you in your day-to-day use of Adobe products. 
Make a point of checking out Premiere 6, which brings 
a whole load of Web functionality to the already 
excellent video-editing application. 


Cycore 


[w] www.cult3d.com 

Ina similar vein to Viewpoint, Cycore offers 

solutions that make putting 3D on your site a piece of 
cake. The popular Cult3D Designer is a free 
application that enables you to import your 3D models, 
add interactivity using JavaScript and then export 
them ready for use on your site. A simple solution to a 
tough problem. 


Macromedia 


[w] www.macromedia.com 

At Macromedia's expansive Website you can check out 
its range of industry standard Web authoring tools. 
Make a point of visiting the Macromedia University, 
where you can sign up for some free Web-based 
training in Flash, Directorand other products. Also 
check out the Showcase section of the site to take a 
look at some of the best sites on the Web that have 
been built using Macromedia products. 


Viewpoint 
[w] www.viewpoint.com 


Viewpoint’s technology can bring an exciting, 
3D-based experience to your Website. Whether you 


Viewpoint etn wert hen matin = 2 os tne toy 
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The company once known as MetaStream are still going strong, 
concentrating on bringing even more advanced 3D technology 
to the Web. Check them out at [w] www.viewpoint.com. 


Web Special 


Pesky’s site is one of those corners of the Web that will keep 
you entertained for hours. Interactive Flash cartoons along with 
some inspired Web design make this site truly engaging. 


need to showcase products or show off your 3D 
models, download the free Scenebuilder application 
and take your site into the third dimension. 


Showcase 


Electrotank 


[w] www.electrotank.com 

We know we've said it before, but Electrotank holds 
one of the best Flash games on the Web - Mini Golf. 
The site's worth a visit purely for this, but while you're 
there check out the multi-user server and the new 
manga-inspired Electro Air Hockey. 


Frosties 


[w] www.frosties.co.uk 

If this site wasn't much kop, you could hardly associate 
it with Tony the Tiger’s favourite saying. Slick design, 
awesome animation and some of the most addictive 
Flash games on the Web, make this more than just a 
kid’s site. In a word, Grrrrrrrreeeaaaat (sorry). 


Getmusic Karaoke 


http://karaoke.getmusic.com 

You may wonder what a music site is doing here, and 
we wouldn't blame you. But, one visit to Getmusic’s 
Karaoke site and it all becomes clear. Some excellent 
Flash navigation devices are used, along with 

the opportunity to record and upload your version 


zSites is a website system for 


Graphic Designers ©... Scenic Artists 
sin fact anyone with creative work 


Zsites is a great place for the less Web-savvy illustrator to get 
an online portfolio on the Web. Simple but effective designs 
make it worth a look. The service does cost though. 


The brainchild of illustrator Richard May and designer 
Jason Arber, Pixelsurgeon comments on the strange, yet 
design-concious corners of the Web. 


of classic hits for everyone to hear. Class design, 
sticky content. 


glaznost 


[w] www.glaznost.com 

Some completely bizarre experimental Flash movies 
reside at glaznost. Interactivity, scripting and 
animation are explored to the full. A great place 

to check out the diversity of Flash itself, as well as 
that of contemporary Flash designers’ minds. Prepare 
to be bamboozled. 


Pesky 

[w] www.pesky.com 

London-based animators Pesky have a site that has to 
be seen to be believed. Full of wonderful character 
animation, hilarious comedy shorts and some bizarre 
audio, Pesky.com should be an inspiration for Flash 
animators everywhere. 


Pixelsurgeon 

[w] www. pixelsurgeon.com 

The brainchild of illustrator Richard May and designer 
Jason Arber, Pixelsurgeon is a compendium of 
design-related (and not so design-related) sites on the 
Web. The frequently updated news, featuring some of 
the wackiest Flash sites on the Web make this worth a 
visit at least once a day. 


The Cartoon Network 


[w] www.cartoonnetwork.com 

Scooby Doo, Batman and various other children's 
classics are reproduced in Flash with exquisite detail 
at The Cartoon Network's fun and funky site. Games, 
cartoons and jokes galore make up a sticky site that 
should be of inspiration to any wannabe Flash guru. 


zSites 


[w] www.zsites.co.uk 

Usually pre-built sites that offer the user the chance to 
upload graphics and content into a template are pretty 
dismal. zSites however, takes a different approach by 
actually supplying classy designs. A great place for the 
over-worked illustrator to get a portfolio online 
without having to learn a new medium. It'll cost you 
though. Check out the site for details. 
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We make the move from Web to 
print as painlgss 
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3D modelling in Bryce 5, get the best 
from Fireworks 4, plus Painter 7 and 
Fujifilm’s FineScan 2750 on test 
www.computerarts.co.uk 
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Build your site... 

for free 

Over these two pages we've 
concentrated on bringing you some 
of the best (and worst) commercial 
tools for building and enhancing 
your Website. But, what about 
freeware applications? Luckily for 
even the poorest of designers, an 
amazing amount of freeware HTML 
coding tools and WYSIWYG editors 
exist — all free and downloadable. 

One of our favourite free coding 
tools is BBEdit Lite. This is a 
stripped down version of the highly 
thought of BBEdit and is extremely 
useful for editing existing code. 
Check out [w] www.barebones.com 
for the download. 

Another great tool is 
Web-O-Rama 736. This isa 
full-featured HTML editor that 
both novices and advanced users 
will find a useful addition to 
their toolkit. Check out The 
Computer Guys Website at 


[Ww] www.kevingunn. com. 


Finally, we'd recommend 
AceHTML 4 from Visicom Media. 
This all-in-one Website building 
tool comes with everything you 
need from basic HTML editing to 
pre-defined DHTML scripts. HTML 
syntax checker and table creation 
tools are the pick of the features. 
See [w] freeware.acehtmL.com for 
the download. 
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Recent software reviews 


Product 


Platform Price Company Contact Verdict 


Dreamweaver 4 PC/Mac £269 Macromedia www.macromedia.com REI 


Dreamweaver is without doubt one of, if not the best, WYSIWYG Web authoring applications available. An easy to navigate interface, coupled 
with a strong feature set with excellent Flash, Director and Fireworks integration make it truly indispensable to the creative Webmaster. 


UltraDev 4 PC/Mac £469 Macromedia www.macromedia.com EEE 


Think of Drumbeat's successor, UltraDev, as Dreamweaver 4 on steroids. All the features of Macromedia's WYSIWYG authoring app are 
combined with many behaviours, wizards and objects enabling you to create database-powered Web applications. A steep learning curve awaits, 
but if you need database driven content, U/traDev is a great tool for the job. 


GoLive 5 PC/Mac £234 Adobe www.adobe.com He He Hee 


GoLive Cyberstudio brought drag and drop Web authoring to the desktop long before Dreamweaver. Realising this was a good thing, Adobe 
snapped up the product and renamed it GoLive. Excellent site management tools, table-editing features and integration with Adobe's range of 
well-respected graphics products make this is a sound choice, 


Freeway 3.0 Mac £199 — Softpress www.softpress.com EIEREDESE 


Freeway takes a somewhat different approach to Web design to Dreamweaver and GoLive. The less Web-savvy will adore this application, 
thanks mainly to its XPress-style interface. JavaScript, CSS positioning and actions (that rival those in Dreamweaver and GoLive) are all here. 
Sadly, no Flash support as yet though. 


Caligari iSpace PC $99 —Caligari www.caligari.com Die He he 


An oddball application from the makers of the 3D package trueSpace, iSpace enables you to generate 2D Web pages in a 3D environment. A 
nice attempt at something a bit different but there's no scope for creating interactive 3D content and the workflow is rather poor, Professional 
deisgners will feel more at home with a good 3D and separate Web package instead. 


NetObjects Fusion 5.0 PC £234 RedLeaf www.netobjects.com CREEBES 


A business-orientated Web design package, Fusion puts emphasis on site construction rather than the intricacies of design. Supplying you with | 
drag-and-drop components, a site complete with embedded forms, DHTML, database connections and online shopping applications. 


PhotoWebber 2.0 PC/Mac £249 MediaLab www.medialab.com 


PhotoWebber is a graphics production tool that enables Web designers to create instant Web pages from layered Photoshop files. Rather than 
slicing the image up into various elements and putting them back together as an HTML-based page, the app intelligently transfers block and 
background colours into body properties and table backgrounds. A good one for the less Web-savvy Photoshop user. 


HoTMetal Pro 6 PC £88  SoftQuad www.softquad.com 

Starting life as an HTML-crunching text editor, HoTMetal Pro attracted a loyal following of coding fans. The latest release though has evolved 
into a full-on di rop authoring tool with a sophisticated range of features including one of the best HTML editing modes of any 
package. A budget, yet powerful application. 


BeyondPress 4 PC/Mac £235 Extensis www.extensis.com EEE 


BeyondPress from Extensis plugs into QuarkXPress 4 — aiming to convert XPress pages into HTML - complete with image conversion, font 
manipulation and hyperlinking utilities. For designers not wanting to venture out of their trusty copy of XPress, BeyondPress could be a good 
way of creating Web pages. For others, it’s a bit difficult to see the appeal. 


HomeSite 4.5.2 nde) i) £88 Dabs Direct www.allaire.com bad aad Raa ea 


Although HomeSite is primarily a code-based editor, it does feature a drag-and-drop window for laying out visual elements. The real 
power though comes in the form of manual coding tools. These include a Tag Inspector and colour coding for a variety of script types. 
including JavaScript and CSS. 


Best software by categories 


Product 


Platform Price Company Contact Verdict 


Media 100 
Sales: [t] 01344 411 001 

Tech support: 

Flash 5 PC/Mac £259 Macromedia www.macromedia.com EREDEDESE ebibivapseaits ohgeocued 
Flash comes of age with a major interface and feature redesign. A completely redesigned ActionScript, more workflow-facilitating tools and a 
full-on Bézier toolset make the application a tool that every Web designer must have. 


Softpress 
Sales: [t] 0800 7313425 

Tech support: 

[w] www.softpress.com/support/ 


LiveMotion PC/Mac £222 Adobe www.adobe.com ERESEBE 


Adobe's answer to Macromedia's all-encompassing Flash, doesn't quite make the grade. Although featuring a set of excellent drawing tools, 
the standard Adobe interface and an After Effects-style timeline, the application has no scripting capabilities and is best used for simple 
SWF splash pages. 


Xara 
Sales: [t] 01442 350 000 
Tech support: 

; [w] www.xara.com/support/ 
Director 8.5 PC/Mac £1115 Macromedia www.macromedia.com EYEE 


For a 5 release, Director brings a good amount of new features, most notably in the form of ShockWave 3D. Now you can create 3D models 


Caligari 


externally in dedicated packages and import them into Director ready to be used in your multimedia creations. A plethora of new 3D-orientated Sales: Buy online 
behaviours along with an easily navigable interface make creating interactive 3D for the Web a much easier process. [w] www.caligari.com 
Tech support: 
[w] www.caligari.com/help/ 


Visviva Authoring Studio 1.1. PC £599 —-Visviva www.visviva.com BE 


Visviva Authoring Studio (VAS) is a solution for creating HTML, 3D modelling and animation, vector graphics and bitmaps. It sounds like a great 
idea, but unfortunately it fails on all accounts. Extremely tricky to use and the HTML it produces is shareware-esque. One to be avoided. 


support/techsupport.html 


Media Lab 
Sales: Buy online 

[w] www.medialab.com 

Tech support: 

[Ww] www.medialab.com/support 


Extensis 
Sales: [t] (CU) 020 8200 8282 
Tech support: 

[e] support@extensis.com 


Photoshop 6 PC/Mac £469 Adobe www.adobe.com BERICIE 


| The defacto-standard in image-editing and manipulation boasts a feature set that is currently unrivalled by any similar package. Unlimited layers, 
vector shapes and a new interface are highlights of this release. 


ImageReady 3 PC/Mac Bundled with Photoshop www.adobe.com 

Photoshop's dedicated Web sibling, ImageReady, holds a plethora of features and options for preparing Web graphics and GIF animations. New 
to version 3 (among other things) are dynamic layer-based slices and rollover styles. The perfect Web companion to Photoshop's awesome h | k * 
image-editing ability. The toolkit 


Fireworks 4 PC/Mac £269 Macromedia www.macromedia.com EXEBESE 


Fireworks 4 is the perfect companion to Macromedia Dreamweaver and Flash - enabling you to prepare bitmaps, vectors and animations and The kit you need to 
crunch them down to size. Version 4 brings a pop-up menu creator ~ enabling you to quickly produce dropdown menus, better batch processing make it bi Bucs 

and enhanced animation controls. Well worth a look. 

Here's the sort of tools you'll need 


‘Xara X PC £120 Xara Www.xara.com Die ie ie Sie] to create dynamic, media-rich 


xara X is an all-in-one graphics package with a feature set that brings it into line with Fireworks and the like. Automated JavaScript rollover Websites, as recommended by 
button creation, complete vector drawing, bitmap export optimisation tools and the ability to export to SWF make Xara a great purchase for Web Computer Arts Specials: 
designers on a budget. 


HTML Shrinker Pro 2.01 PC £29.95 The Plugin Site www.thepluginsite.com Wet Aiahoring Spear 
HTML Shrinker is a relatively simple application that strips your HTML, JavaScript, PHP, Perl and VBScript of line breaks, excess spacing and Dreamweaver or GoLive 5 


redundant tags, while still respecting comments from leading HTML editors and leaving SSI commands untouched. Graphics will still need 


optimising of course, but nevertheless a handy and budget-friendly app. image Edttor: 


Photoshop 6 or Fireworks 4 


Vector drawing application: 


|Hypnotizer.editor1.0 PC $360 Hypnotizer www.hynotizer.net DEBE 
The idea of this application is simple: take a piece of Web video, be it in QuickTime, RealMedia, or Windows Media format, and use the Illustrator 9 or FreeHand 10 
Hypnotizer Editor to overlay interactive graphics onto it. On the whole it works well and is only marred by the pay-per-view model of 
distributing content. pols ee wes 
Multimedia/animation application: 
Flash 5 and Director 8.5 
Cleaner 5 PC/Mac £492 Media 100 www.media100.com DEE 
Cleaner does very much what it says on the tin. Simply import virtually any kind of movie file into the app (including MOV, AVI and bv/ eat : 
Windows Media) and crunch it down to size, for streaming on the Web, using the application's vast range of settings and dialogs. Essential streaming video app: 
for anyone serious about streaming. Premiere 6 and Cleaner5 


Premiere 6 PC/Mac £539 Adobe www.adobe.com EXVESVIE Dedicated HTML editor: 


The industry's favourite video-editing application now has a variety of options for exporting your footage to the Web. If you need an all-in-one BBEdit 6.1 or HomeSite 4.5 
DV app that can capture, edit and prepare footage for the Web, Premiere is it. 
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Plus... 


‘Take control of Photoshop Preferences 
* Photoshop 7: what we want in it 
*3D compositing in Photoshop 


The definitive guide to art, design and technology 
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Games and Animation Training 


Sprite Interactive has launched a range of training courses to teach y 

create vibrant animations a G exciting games using Macromedia Flash 5 
techniques not offered by ventional Flash courses. Every student get 
packed CD-ROM of resour - routines that help build high impact g, 


and animations. 


We employ highly trained consultants who have worked in the industry f 
of years, and have real, re at experience of working on Flash proje 
profile clients, for exampl ey, 
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Flash 5 Basics Course: Two day course i} 

In this cross-platform training, we will teach you the basics of Flash, giving ye 
level of understanding of the program that will allow you to begin exploring 
confidence, the many so This also includes basic ActionScript 


if 


Flash 5 Animation Course: Two day course 
We will teach you how to animate using Flash. You will learn the basics of 
animation, and then how to employ these techniques using Flash 5. 


Flash 5 Games Course: two day course : 
You will learn how to create games using Flash. The course is taught throu 
development of example sames €s, each game containing a number of key fe 
of general game developme , such as making objects draggable, collision 
and the use of layers. 


Sealed interactive] 


The Training Centre, situated in Fetcham Park House, provides a fantastic environment, 
where tradition meets technology. Built in 1705, this Grade I! listed mansion at 
Fetcham, near Leatherhead in Surrey, was designed by the architect William Talman 
and its landscaped grounds by "Capability" Brown. 


There are frequent rail services to London Waterloo (35 minutes) and London 
Victoria (40 minutes). See www.sprite.net for more details. 


The Training Centre is situated at: 
Fetcham Park House, Lower Road, Fetcham, Surrey, KT22 9HD 
Phone: 01372 371212, Email: Training@sprite.net 


OuterEye enable anybody to add 
streaming video to.a website. 


Look better, sell better, 
entertain and inform. 


| Whether it’s a TV advert, or a full 
length movie, you can get going 
§ today. 


‘From a single clip to an entire | 
library, OuterEye have a solution. 


but iton 
Servers around the globe, a dedicated the web S 


encoding team and a sensible price, what 
more could you ask for? | 


Contact sales on 020 8392 8080 
| or check out the website for details 
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